• vue-组件通信(二)


    ​🌈个人主页:前端青山
    🔥系列专栏:Vue篇
    🔖人终将被年少不可得之物困其一生

    依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信(二)

    目录

    组件通信(二)

    (1) props / $emit

    1. 父组件向子组件传值

    2. 子组件向父组件传值

    (2)eventBus事件总线($emit / $on)

    (3)依赖注入(provide / inject)

    (3)ref / $refs

    (4)$parent / $children

    (5)$attrs / $listeners

    (6)总结

    组件通信(二)

    组件通信的方式如下:

    (1) props / $emit

    父组件通过props向子组件传递数据,子组件通过$emit和父组件通信

    1. 父组件向子组件传值
    • props只能是父组件向子组件进行传值,props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。

    • props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以传递一个函数。

    • props属性名规则:若在props中使用驼峰形式,模板中需要使用短横线的形式

    父组件
    
    1. 复制代码
     子组件
    
    1. <script>
    2. export default {
    3.    name: "son",
    4.    props: ["msg", "fn"]
    5. };
    6. script>
    7. 复制代码
    2. 子组件向父组件传值
    • $emit绑定一个自定义事件,当这个事件被执行的时就会将参数传递给父组件,而父组件通过v-on监听并接收参数。

    父组件
    
    1. 复制代码
    子组件
    
    1. 复制代码

    (2)eventBus事件总线($emit / $on

    eventBus事件总线适用于父子组件非父子组件等之间的通信,使用步骤如下: (1)创建事件中心管理组件之间的通信

    1. // event-bus.js
    2. import Vue from 'vue'
    3. export const EventBus = new Vue()
    4. 复制代码

    (2)发送事件 假设有两个兄弟组件firstComsecondCom

    1. 复制代码

    firstCom组件中发送事件:

    1. 复制代码

    (3)接收事件secondCom组件中发送事件:

    1. 复制代码

    在上述代码中,这就相当于将num值存贮在了事件总线中,在其他组件中可以直接访问。事件总线就相当于一个桥梁,不用组件通过它来通信。

    虽然看起来比较简单,但是这种方法也有不变之处,如果项目过大,使用这种方式进行通信,后期维护起来会很困难。

    (3)依赖注入(provide / inject)

    这种方式就是Vue中的依赖注入,该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方法来进行传值。就不用一层一层的传递了。

    provide / inject是Vue提供的两个钩子,和datamethods是同级的。并且provide的书写形式和data一样。

    • provide 钩子用来发送数据或方法

    • inject钩子用来接收数据或方法

    在父组件中:

    1. provide() {
    2.    return {    
    3.        num: this.num  
    4.   };
    5. }
    6. 复制代码

    在子组件中:

    1. inject: ['num']
    2. 复制代码

    还可以这样写,这样写就可以访问父组件中的所有属性:

    1. provide() {
    2. return {
    3.    app: this
    4. };
    5. }
    6. data() {
    7. return {
    8.    num: 1
    9. };
    10. }
    11. inject: ['app']
    12. console.log(this.app.num)
    13. 复制代码

    注意: 依赖注入所提供的属性是非响应式的。

    (3)ref / $refs

    这种方式也是实现父子组件之间的通信。

    ref: 这个属性用在子组件上,它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。

    在子组件中:

    1. export default {
    2.  data () {
    3.    return {
    4.      name: 'JavaScript'
    5.   }
    6. },
    7.  methods: {
    8.    sayHello () {
    9.      console.log('hello')
    10.   }
    11. }
    12. }
    13. 复制代码

    在父组件中:

    1. <script>
    2.  import child from './child.vue'
    3.  export default {
    4.    components: { child },
    5.    mounted () {
    6.      console.log(this.$refs.child.name);  // JavaScript
    7.      this.$refs.child.sayHello();  // hello
    8.   }
    9. }
    10. script>

    (4)$parent / $children

    • 使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)

    • 使用$children可以让组件访问子组件的实例,但是,$children并不能保证顺序,并且访问的数据也不是响应式的。

    在子组件中:

    1. 复制代码

    在父组件中:

    1. // 父组件中
    2. 复制代码

    在上面的代码中,子组件获取到了父组件的parentVal值,父组件改变了子组件中message的值。 需要注意:

    • 通过$parent访问到的是上一级父组件的实例,可以使用$root来访问根组件的实例

    • 在组件中使用$children拿到的是所有的子组件的实例,它是一个数组,并且是无序的

    • 在根组件#app上拿$parent得到的是new Vue()的实例,在这实例上再拿$parent得到的是undefined,而在最底层的子组件拿$children是个空数组

    • $children 的值是数组,而$parent是个对象

    (5)$attrs / $listeners

    考虑一种场景,如果A是B组件的父组件,B是C组件的父组件。如果想要组件A给组件C传递数据,这种隔代的数据,该使用哪种方式呢?

    如果是用props/$emit来一级一级的传递,确实可以完成,但是比较复杂;如果使用事件总线,在多人开发或者项目较大的时候,维护起来很麻烦;如果使用Vuex,的确也可以,但是如果仅仅是传递数据,那可能就有点浪费了。

    针对上述情况,Vue引入了$attrs / $listeners,实现组件之间的跨代通信。

    先来看一下inheritAttrs,它的默认值true,继承所有的父组件属性除props之外的所有属性;inheritAttrs:false 只继承class属性 。

    • $attrs:继承所有的父组件属性(除了prop传递的属性、class 和 style ),一般用在子组件的子元素上

    • $listeners:该属性是一个对象,里面包含了作用在这个组件上的所有监听器,可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。(相当于子组件继承父组件的事件)

    A组件(APP.vue):

    1. <script>
    2. import Child1 from './Child1.vue';
    3. export default {
    4.    components: { Child1 },
    5.    methods: {
    6.        onTest1() {
    7.            console.log('test1 running');
    8.       },
    9.        onTest2() {
    10.            console.log('test2 running');
    11.       }
    12.   }
    13. };
    14. script>
    15. 复制代码

    B组件(Child1.vue):

    1. <script>
    2. import Child2 from './Child2.vue';
    3. export default {
    4.    props: ['pChild1'],
    5.    components: { Child2 },
    6.    inheritAttrs: false,
    7.    mounted() {
    8.        this.$emit('test1'); // 触发APP.vue中的test1方法
    9.   }
    10. };
    11. script>
    12. 复制代码

    C 组件 (Child2.vue):

    1. <script>
    2. export default {
    3.    props: ['pChild2'],
    4.    inheritAttrs: false,
    5.    mounted() {
    6.        this.$emit('test2');// 触发APP.vue中的test2方法
    7.   }
    8. };
    9. script>

    在上述代码中:

    • C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性

    • 在B组件中通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的)

    (6)总结

    (1)父子组件间通信

    • 子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。

    • 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件,子组件通过 $parent 获得父组件,这样也可以实现通信。

    • 使用 provide/inject,在父组件中通过 provide提供变量,在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深,只要调用了 inject 那么就可以注入 provide中的数据。

    (2)兄弟组件间通信

    • 使用 eventBus 的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。

    • 通过 $parent/$refs 来获取到兄弟组件,也可以进行通信。

    (3)任意组件之间

    • 使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。

    如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。

  • 相关阅读:
    测试开发基础——测试用例的设计
    Flutter学习2 - Dart
    安泰电压放大器原理(电压放大器和电荷放大器的优缺点)
    机器视觉Halcon-焊点提取排序设计思路一
    这个双11,阿里云经历了可能是历史级的大故障!
    全栈自动化测试python基础之文件的操作
    Redis List类型命令 - Set类型命令 - SortedSet类型命令
    [机缘参悟-73]:深度思考:心智提升的七个阶段
    【问题总结】 记 一次dockerFile构建报错
    基于Springboot实现毕业生信息招聘平台管理系统演示【项目源码+论文说明】分享
  • 原文地址:https://blog.csdn.net/2302_76329106/article/details/134458479