VUE中 组件间的方法调用
1. 子组件向父组件传值
2. 父组件向子组件传值
3. 兄弟组件间值的传递
具体写法如下：
1.子组件向父组件传值
this.$emit('on-update’,)
／／this.$emit(‘on-updata’,"子组件向父组件传值")
父元素元素上绑定事件
<uxInputChs @on-update='update'></uxInputChs
父元素方法中添加
update(data){
console.log(data)
},
2.父组件向子组件传值
父组件
向子组件绑定变量
<child v-bind:parentToChild="parentMsg"></child>
data(){
return {
parentMsg:'父组件向子组件传值'
}
},
子组件用props接收变量
<template>
<div>{{parentToChild}}</div>
</template>
<sctipt>
props:["parentToChild"]
</script>
3.兄弟组件间值的传递
eventBus.js
import Vue from 'Vue'
export default new Vue()
App.vue
<secondChild></secondChild>
<firstChild></firstChild>
FirstChild.vue
在方法中用$emit调用兄弟组件的方法
bus.$emit('userDefinedEvent', this.message);//传值
SecondChild.vue
兄弟组件中 mounted中监听事件
mounted(){
var self = this;
bus.$on('userDefinedEvent',function(message){
self.message = message;//接值
});
}
