组件间通信
<h2>父子、兄弟间组件通信综合</h2>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>根组件F：<button>按钮F</button>F:<span class="red">{{f}}</span>,A:<span class="red">{{a}}</span>,B:<span
class="red">{{b}}</span></p>
<!-- 1.接收父组件传来的数据：:son="father" -->
<!-- 三、将自定义事件挂载到子组件上：@自定义事件名="父组件方法" -->
<childa :ff="f" :bf="b" @a="geta"></childa>
<childb :ff="f" :af="a" @b="getb"></childb>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
window.onload = function () {
// 声明组件
let childa = {
// 3.将接收到的数据渲染到组件上：ff
template: `<div>
<p>子组件a：<button @click="senda()">按钮a</button>F:<span class="red">{{ff}}</span>,A:<span class="red">{{a}}</span>,B:<span class="red">{{bf}}</span></p>
</div>`,
props: ['ff', 'bf'],// 2.用props接收，值为接收参数的数组
data() {
return {
a: 'A',
// 一、自定义方法(this.$emit())传递子组件数据：data()函数的返回对象内添加自定义方法
senda() {
// 二、自定义方法：this.$emit(event,param),event:挂载到组件上的自定义事件;param:传递到父组件的数据参数
this.$emit('a', this.a)
}
}
}
}
let childb = {
template: `<div>
<p>子组件b：<button @click="sendb()">按钮b</button>F:<span class="red">{{ff}}</span>,A:<span class="red">{{af}}</span>,B:<span class="red">{{b}}</span></p>
</div>`,
props: ['ff', 'af'],// // （五）、兄弟之间传输：自——>父——>兄
data() {
return {
b: 'B',
sendb() {
this.$emit('b', this.b)
}
}
}
}
new Vue({
el: '#app',
components: { childa, childb },// 挂载组件
data() {
return {
f: 'F',
a: ' ',
b: ' '
}
},
methods: {
// 四、响应子组件数据传输的函数
geta(parm) {
this.a = parm
},
getb(parm) {
this.b = parm
}
}
})
}
</script></code></pre>
<h3>一、父传子</h3>
<ol>
<li>接收父组件传来的数据：<code><my-tag :xx="a"></my-tag></code></li>
<li>用props接收，值为接收参数的数组: <code>let myTag = {...props:['xx'],...}</code></li>
<li>将接收到的数据渲染到组件上：<code>let myTag = {...template:"...{{xx}}...",...}</code></li>
</ol>
<h3>二、子传父</h3>
<ol>
<li>自定义方法(this.$emit())传递子组件数据：子组件data()函数的返回对象内添加自定义方法senddata()</li>
<li>自定义方法senddata()：this.$emit(event,param),event:挂载到组件上的自定义事件;param:传递到父组件的数据参数 <code>this.$emit('dataevent',data)</code></li>
<li>将自定义事件挂载到子组件上：@自定义事件名="父组件方法" <code><my-tag @dataevent="getdata"></my-tag></code></li>
<li>父组件创建响应子组件数据传输的函数：<code>methods:{getdata(data){this.data.xx = data.xx}}</code></li>
</ol>
<h3>三、自传兄</h3>
<ol>
<li>自传父，父传兄</li>
<li>Vuex:拿个store把所有数据装起来，各组件按需分配</li>
<li>事件总线（eventbus）</li>
</ol>