子组件接收父组件的数据可以使用props和bind进行
父组件
<abc :mydata="data"></abc> //监听子组件触发的changeHi事件,然后调用changeHi方法
子组件:
props:['cdata']//接收父组件传递
<div>{{cdata}}</div>
父组件要监听子组件的事件发生可以使用emit和on进行,子组件必须要触发事件,然后父组件才可以接收到。
子组件:
<div @click="add">{{data}}</div>
methods: {
add () {
this.$emit('changeHi', this.data) //触发changeHi这个自定义方法,'this.data为向父组件传递的数据
}
}
父组件
<abc @changeHi="changeHi"></abc> //监听子组件触发的changeHi事件,然后调用changeHi方法
methods: {
changeHi(a) { // a为子组件传过来的数据
a = a + "1";
}
}
当然,还可以使用vuex进行数据传输,但使用vuex一般是中大型项目,小型项目的话就自定义事件进行父子组件传输,兄弟组件的数据传输的话可以使用event bus 或者是vue-event-proxy这个插件