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指向