父传子
父传递:自定义属性形式进行数据绑定
在父组件的模版中对子组件标签进行属性绑定
<child :message="hello"></child>
子接收:props
在子组件中使用props属性显式地接收
props: ['message'],//然后即可使用this.message使用。
子传父:
tip:需要事件来触发完成
子组件:this.$emit('自定义的方法名称', 空/数据)
methods: {
test() {
this.$emit('funcName',data)
},
}
父组件:在子组件名称(标签)上,绑定“子组件自定义的方法名称”;然后在此组件中的methods里面定义回调函数
<child @funcName='sayHello'></child>
<script>
methods: {
sayHello (val) {
console.log(val)
}
}
</script>
兄弟传递:
子组件:this.$emit('自定义的方法名称', 空/数据)
父组件:在子组件名称(标签)上,绑定“子组件自定义的方法名称”;然后在此组件中的methods里面定义回调函数;再把此组件获得的数据通过父传子的方式传递给子组件即可
参考:https://blog.csdn.net/qq_36407748/article/details/80150137
A是父组件,B是A的子集,C是B的子集,A传数据给C;用$attrs
和$listeners
在A的页面上的B组件上绑定要传递的数据
<b :messagec="messagec"></b>
data() {
return {
messagec:'hello c' //传递给c组件的数据
}
}
B页面
<c v-bind="$attrs" v-on="$listeners"></c>
C页面
<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
//通过`$attrs`和`$listeners` 传递过来的数据保存在全局变量`$listeners`上