VUE 组件间通信---单向数据流

1,892 阅读1分钟

vue的单向数据流 🥚🥚🥚

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

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

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:
  1. 加载渲染过程: 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  2. 子组件更新过程: 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  3. 父组件更新过程: 父 beforeUpdate -> 父 updated
  4. 销毁过程: 父 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;
    }
  }
}