Vue組件傳值方法調用

1.子組件改變父組件的值

<father  label="雲盤快照" name="name2">

<son :props='rows'   @change="changestate">

</son>

</father >

 

父組件method中        changestate（e）{ this.operation = e; }

子組件method中        this.$emit( 'change'，傳的值this.data.xxx);

1.1.父組件改子組件的值

projectOpera()父組件方法{ this.$refs.child.operationList （子組件中的值）= true; }

 

2.父傳子

父：components: {'b-div': b} // 注冊，只能在當前a組件里使用 <b-div :propsname='datas(向子組件傳遞的參數)'></b-div>

子：<template> <div>{{propsname}}</div> </template>

export default{ props: ['propsname'],

data(){} }

 

2.2子傳父

父組件的子組件上定義方法

子組件method中        this.$emit( 'change'，傳的值this.data.xxx);

 

3.父調用子組件方法

子組件定義ref = "child",

this.$refs.child.方法()；

 

3.3子組件調用父方法

父組件 中在子組件上定義@change="fatherMethod" 

method中定義fatherMethod方法；

 子組件    this.$emit('change');

 

4.非父子組件傳值

建議使用VUEX中共享倉庫

this.id = this.$store.state.(sotre中定義的值);

或者

Bus使用空vue實列做中央數據中線；

定義Bus.js

import Vue from "vue";

var Bus = new Vue();

export default Bus;

在A中，Bus.$emit('getVm',child);

在B中，

Bus.$on('getVm', function (data) {

self.percent = data.name;

console.log(self.percent);

})

bus 好像是1.0廢棄dispatch和broadcast之后 出來的 解決方案

 

 

 

5.非父子組件之間的方法調用（es6方法）

//B模塊
import A from 'A的相對路徑’
然后調用方法
A.methods.方法函數名()
會改變this指向