Vue组件之间传值

基于现在都是模块化开发，vue开发过程中组件之间传值是必不可少的，传值的方法有很多，今天整理一些组件之间传值的方法。

Props：

这个方法应该是最常用的，父组件通过bind指令传给子组件，子组件通过跟data同级的props数组接收。

父组件：<model :msg ="msg"></model>

子组件：props: ['msg']

然后子组件就可以使用msg这个值了。

$parent：

子组件修改父组件数据，这要在props的基础上才能使用，子组件修改父组件直接赋值会报错，使用this.$parent.msg = ‘修改父组件’;子组件就可以修改父组件的数据。

$emit：

也是很常见的放，子组件通过方法传递参数给父组件。

父组件：

<model @btn="btn"></model>

btn(val){
console.log(val);
}

子组件：this.$emit(‘btn’, ‘我是传递给父组件方法的参数’);

ref：

父组件：<model ref="headcar"></model>

父组件调用：this.$refs.headcar

父组件通过$refs调用子组件的方法和属性。

.sync修饰符：

父组件：

<model :msg.sync="msg"></model>
<p>{{msg}}</p>

子组件：

<input type="text" v-model="index">

watch:{
index(val){
this.$emit('update:msg', val)
}
},

这个方法用的比较少，因为emit调用方法就能实现了。

Vuex全局状态管理器：

这个是vue的一个状态管理模式，这个就不多讲了，不过我们说的是组件之间传值，虽然vuex可以实现，但是并不符合数据共享的概念，并不推荐。

listeners：

这两个一个是传递数据，一个是调用方法回传数据。跨组件之间传递数据使用这两个属性非常有用。接下来我会用四个组件，结构如下：

A组件：<model1 :msg="msg" @btn="btn" :tre="tre"></model1>

B组件：<model2 v-bind="listeners"></model2>

C组件：<model3 v-bind="listeners"></model3>

D组件：{{msg}}this.$emit("btn", '我是第N个组件');

简单说listeners是传递方法，通过v-bind和v-on指令跨组件传递数据（实践不能简写），方法在每个组件之间都能调用。而attrs的数据要用props获取，但是要注意，要是B组件props: [‘msg’]，在B组件可以使用msg数据，但是C和D组件就无法获取msg数据，等于被拦截了。

Provide和inject

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

父组件：

provide(){
return {
all: this.msg,
}
},

这边通过跟data一样返回，主要是为了可以调用当前的数据，直接用json格式只能写死数据。

在父组件生命周期内的任何子组件：

inject: ['all']

然后就可以调用这个数据了。这边要注意一点，想要响应式的改变各个子组件的数据，msg想要是一个对象，否则子组件不会动态响应all这个数据。使用provide和inject的时候，要注意，因为这跟props不一样，不是局限于从当前父组件获取的，所以在非常多组件之间调用的时候，不利于维护。

Vue组件通信大概就这几个，当然，要是使用JavaScript的方法，比如全局绑定在某个方法或者属性，本地缓存等也是可以的。不过大部分看起来还是基于props和emit。

欢迎关注Coding个人笔记 公众号