vue父子组件传值和执行顺序

父子组件的执行顺序为：

1. 父组件beforeCreated
2. 父组件created
3. 父组件beforeMounted
4. 子组件beforeCreated
5. 子组件created
6. 子组件beforeMounted
7. 子组件mounted
8. 父组件mounted

实例化数据的核心

beforeCreated->inject-> props->methods->data->computed->watch->provide->created

1. props 和 emit （父和子）

2. $attrs 和$listeners （爷和孙子组件传值）

$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

我的理解：

接收除了props声明外的所有绑定属性（class、style除外）

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

我的理解：

接收除了带有.native事件修饰符的所有事件监听器

使用场景：

1. 组件传值时使用： 爷爷在父亲组件传递值，父亲组件会通过$attrs获取到不在父亲props里面的所有属性，父亲组件通过在孙子组件上绑定$attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法；
2. 对一些UI库进行二次封装时使用：比如element-ui，里面的组件不能满足自己的使用场景的时候，会二次封装，但是又想保留他自己的属性和方法，那么这个时候时候$attrs和$listners是个完美的解决方案。

转自：www.cnblogs.com/chanwahfung…

3.中央事件总线（任何组件之间的传值）

4.provide和inject

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

5. v-model

父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值

6. $parent和$children $refs,$root, $parent,$children

      在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.

7. slot 作用域插槽

8. vuex