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;//接值

});

}