标签：传递 eof message content span nta 调用 简化 ++
Vue组件
组件概念：web中的组件其实就是页面组成的一部分，它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。
特征：高内聚，低耦合。
优点： 1、提高开发效率
2、方便复用
3、简化调用步骤
4、提升整个项目的可维护性
组件的命名：
Vue.component("my-component-name",{}）
具体实例：
<body>
<div id="app1">
<test></test>
</div>
?????
??????
<div id="app2">
<test>
</test>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//全局组件
Vue.component(‘test‘, {
// 模板
template: `
<div>
<h1>{{name}}</h1>
<ul>
<li>apple</li>
<li>pear</li>
<li>banana</li>
</ul>
<button @click="changeName">change name</button>
</div> `,
// 数据
data: function () {
return { name: ‘xiejie‘ } },
//方法
methods: {
changeName: function () {
this.name = ‘yajing‘ } } });
new Vue({ el: ‘#app1‘ });
new Vue({ el: ‘#app2‘ });
</script>
</body>
局部组件：
new Vue({
el: ‘#app‘,
components: {
‘component-a‘: ComponentA,
‘component-b‘: ComponentB
} })
Props:父组件通过props向下传输数据给子组件，子组件通过events给父组件发送消息。
父子组件之间通信：
非父子组件之间通信：（创建一个中间商）
<body>
<div id=‘app‘>
<p>当前父组件的数据为：{ message }}</p>
<com></com>
</div>
<script src="./vue.js"></script>
<script>
Vue.component(‘com‘, {
template: ‘<button @click="handleEvent">通过父链直接修改数据 <button>‘,
methods: { handleEvent: function () {
//访问到父链后，可以做任何操作，比如直接修改数据
this.$parent.message = ‘来自组件com的内容; } } });
const app = new Vue({
el: ‘#app‘,
data: { message: ‘this is a test‘ } });
</script>
</body>
this.$children访问子组件
例：
<body>
<div id=‘app‘>
<p>当前数据为：{{ name }}</p>
<button @click=‘getComValue‘> 获取子组件的数据</button>
<com></com>
</div>
<script src="./vue.js"></script>
<script>
Vue.component(‘com‘, {
template: `
<p>{{ message }}</p> `,
data: function () {
return { message: ‘这是子组件的数据‘ } } });
const app = new Vue({
el: ‘#app‘,
data: { name: ‘this is a test‘ },
methods: { getComValue() {
// this.$children 会获取所以的子组件，所要加上下标第一个子组件
this.name = this.$children[0].message; } } });
</script>
</body>
标签：传递 eof message content span nta 调用 简化 ++
原文地址：https://www.cnblogs.com/huronghua/p/12045101.html
