vue2.0传值

父传子

props

provide和inject

必须是两个存在关系的组件，不能在两个毫无关系的两个组件中传值，只能跨层级传值。
相关文章链接: 文章.

$attrs

例：
父组件中
子组件中，如果没有在props中接收，那么就会在this.$attrs中，如果接收了的话就不会在this. $attrs
中，如下图所示

$listeners（传的是一个方法，可直接改变父组件中的值）

可以在子组件中自定义事件，在子组件没有分发事件的前提下，如下图所示

父组件中：

子组件中：
原理：调用this. $listeners.send传进去一个值，会传到父组件中send方法中，然后进行改变数据的操作

.sync（可直接改变父组件中的值）

需要在子组件中通过this. $emit分发事件方式第一个参数为事件名字，必须叫‘update：要修改的属性名’，第二个参数为修改的值

$parent（可直接改变父组件中的值）

子组件：

 click（）{
    this.$parent.name='改变之后的值'  //parent后面跟传的值
}

子传父

1.ref(可直接修改子组件值)

<child  ref="child ></child>


 click（）{
   console.log(this.$refs.child) 
}

2.this.$children （得到的为数组）（可直接修改子组件值）

3.$emit(分发事件形式)

4.通过插槽方式传给父组件

知识1 -----不给名字不给属性为匿名插槽，可以在父组件中直接写内容（不用template情况下），当插槽没有名字时候，在父组件中用的时候名字默认为default（使用template情况下）
知识2 ----插槽不会在页面上生成实际的标签，需要在slot中使用标签包起来
知识3 ----如果想获得作用域插槽this.$scopedSlots.red（） >>>用于封装组件

子组件中：（以作用于插槽为例）

父组件中：

$bus（两个组件中传值）

原理：利用创建一个空的Vue实例
在src文件下建立一个bus文件，然后在其下面创建一个index.js,index.js内容如下

 import Vue from 'vue'
 const bus = new Vue()
 Vue.prototype.$bus=bus

然后在main.js中

import './bus'

使用（传）：

click（）{
this.$bus.$emit('send',this.name) //第一个为事件名，第二个参数为要传的数据
}

使用（接收）：

this.$bus.$on('send',data=>{
    console.log(data)
})

vuex

通过app.vue分发