vue的单向数据流 🥚🥚🥚

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

个人理解：你父亲能他的基因遗传给你，而你却不能把基因给你父亲

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程：父 beforeUpdate -> 父 updated
销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。有两种常见的试图改变一个 prop 的情形 :

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性

如何子代修改父代

订阅自定义事件：调用组件的时候基于属性传递一个方法（父）

<my-component @func='xxx'></my-component>

new Vue({
  methods:{
    xxx(value){
      //=>value是this.$emit时候传递的第二个参数值
    }
  }
});

通知自定义事件执行（子）

{
  methods:{
    xxx(){
      this.$emit('func',10);
    }
  }
}

也可以基于此方法实现兄弟组件（父子组件、隔代组件）之间的信息通信

let eventBus=new Vue; //=>创建事件总线

//A组件
eventBus.$on('xxxA',this.func);

//B组件
eventBus.$emit('xxxA');

基于ref实现父子组件信息通信

ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，基于此可以快速获取和操作子组件中的数据
$parent和$children是获取组件和子组件的实例，只不过$children是一个数组集合，需要我们记住组件顺序才可以

基于provide和inject实现祖先与后代的通信

祖先组件基于provide注册需要供后代组件使用的数据

{
  provide:{ //=>对象或者返回对象的函数都可以（属性值如果是data中的数据，则必须使用函数的方法进行处理）
    name:'eggs',
    year:10
  },
  ...
}

后代组件基于inject声明需要使用的数据并调取使用

{
  inject:['name'],
  methods:{
    func(){
      let name=this.name;
    }
  }
}