1、父子组件传值 与vue相同
父组件向子组件传值
//父组件中
<header-nav :test="test"/>
//子组件中
props:["title"],
created() {
console.log(this.test)
},
子组件向父组件传值
//子组件中
<button @click="sendData"></button>
sendData(){
this.$emit("myEven",this.data)
}
//父组件中
<header-nav @myEven="getData"/>
getData(data){
console.log(data)
}
2、组件与组件之间传值
uni.$on 和uni.$emit 点击组件b中按钮增 组件a中的data+10
//组件A
created(){
uni.$on('updateData',(data)=>{ //这里的括号可以省略 data是自定义的形参
this.data+=data //累加
})
}
//组件B
<button @click="add">点击增加组件A的值</button>
add(){
uni.$emit('updateData',10) //这里的替换为你想要传递的数据
}
本文介绍了Vue中父子组件间的值传递,包括父向子通过属性(props)传递和子向父通过事件($emit)触发的方法。同时展示了组件间通信的另一种方式,利用uni-app的$on和$emit实现跨组件数据更新,例如组件A监听组件B发送的事件来更新自身数据。
3190

被折叠的 条评论
为什么被折叠?



