子组件给父组件传值的三种方式;
<!--方式一:
通过父组件给子组件传递函数类型的props实现,子给父传递数据 a=>App-->
<myA :getA="getA"/>
1.父组件定义函数给子组件传递
App: getA(name){
console.log('App收到了a的信息',name);
},
1.子组件接收函数
a: props:['getA'],
<button @click="sendAname">把a名字给App</button>
2.调用父组件的函数并传值
methods:{
sendAname(){
this.getA(this.name);
}
}
//=======一下是自定义事件的两种方式
<!--方式二:
通过自定义事件b组件给App传递数据 b=>App-->
<!--给b组件vc实例对象绑定自定义事件-->
<myB @chuandi="getB"/>
App:父组件给子组件绑定自定义事件
//定义函数
getB(name){
console.log('自定义事件拿到b信息',name)
}
b: <button @click="sendBname">把b名字给App</button>
1.子组件要触发事件
sendBname(){
//触发b绑定的自定义事件
this.$emit('chuandi',this.name);
}
<!--方式三:
通过ref-->
<myB ref="b"/>
//1.定义函数
App: getB(name){
console.log('自定义事件拿到b信息',name)
},
//加载完毕,钩子函数
mounted() {
//绑定一个自定义事件,把函数传递过去
this.$refs.b.$on('chuandi',this.getB);
}
b: <button @click="sendBname">把b名字给App</button>
1.子组件要触发事件
sendBname(){
//触发b绑定的自定义事件
this.$emit('chuandi',this.name);
}