VUE的資料傳遞

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

});