首先是父组件与子组件沟通

父组件告诉子组件，“嘿，孩子，我有话和你说”

组件A代码

<template><section><h1>这是组件</h1><test-B :chile-name="undefined" :chile-age="undefined"></test-B></section>
</template><script>import testB from "./testB"export default {name: "testA",data () {return  {name:"meiqin",age:18}},components:{testB},}
</script>

注意：父组件给子组件传值时候的写法，冒号，必须使用-代替驼峰。

这里的data不是一个对象，而是函数。

子组件就使用props来收听。

<template><section><h1>这是B组件</h1><div>my name is {{chileName}},my age is {{chileAge}}</div></section></template><script>export default {name: "testA",data () {return{name1 : "meiqin"}},props:{chileName:{type:String,default:"qiunnan" },chileAge:{type:Number,default:100}}}
</script>

props接收三种写法，一是直接接收，类型是数组。二限制类型，是对象；三限制类型和默认值，是个对象

子组件与父组件沟通

父组件在子组件引用上面，设置监听子组件。子组件绑定触发事件，只要一发生改变，父组件就会监听到。

子组件B

<template><section @click="funcB"><hr><h1>这是B组件</h1><div>my name is {{chileName}},my age is {{chileAge}}</div><button  @click="change">按钮</button><button  @click="aa">按钮AA</button><div>{{msg}}</div></section></template><script>export default {name: "testA",data () {return{msg : "爸爸去哪里了"}},props:{chileName:{type:String },chileAge:{type:Number}},methods:{funcB() {this.$emit('funcBBB',this.msg)},change() {this.msg = "爸爸在北京"},aa(){}}}
</script>

父组件A

<template><section><h1>这是A组件</h1><div>这是子组件说话:{{msg}}</div><test-B @funcBBB="change" :chile-name="name" :chile-age="age" ></test-B></section>
</template><script>import testB from "./testB"export default {name: "testA",data () {return  {name:"meiqin",age:18,msg: ''}},components:{ testB },methods:{change (msg) {console.log(msg)this.msg = msg;}},}
</script>

注意点：

funcBBB要对应，this.$emit('funcBBB',this.msg)与 <test-B @funcBBB="change" :chile-name="name" :chile-age="age" ></test-B>

只要子模板发生变化，就会触发change。

函数的写法错误，导致报错

funcB: () =>{           //错误的写法this.$emit('funcB',"msg")
},
change () {this.msg = "爸爸在北京"
}

非父子组件的话

先记下实例

发送方

xgg (cell) {Bus.$emit('xgg', cell)this.$emit('xgg')        //这句是与父组件进行交流
}

非父子组件接收方

mounted () {Bus.$on('xgg', cell => {var arr1 = cell.food_senior_standardsthis.standardArr = arr1.map(() => false)this.currentCount = 0this.combinationId = ''this.price = ''this.food = cell})
},
destroyed () {Bus.$off('xgg')
},

父组件监听

<food-list v-show="tabed == 1" @xgg="shwoTaste = true">