vue3.x组件间通信,实用小技巧都在这里

Posted 杂学不精

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.x组件间通信,实用小技巧都在这里相关的知识,希望对你有一定的参考价值。

本想简单写写,没想到说清楚已经变成了一篇很长的帖子,欢迎当笔记搜藏起来。

props / emits 父子组件通信

props一般负责向子组件传递数据
下面是一个简单的例子,父组件向子组件传递了一个title,子组件负责显示title。

// child-component.vue
<template>
  <h2>{{ title }}</h2>
</template>

<script>
  export default {
    name: "child-component",
    props: [\'title\'] //可以注册多个prop
  }
</script>

// 父组件中,使用子组件
<ChildComponent :title="\'这是传递的Title\'"></ChildComponent>

emits主要用于监听子组件事件
开发过程中子组件可能需要与父级组件进行沟通,这时我们就需要用到emits。下面是一个简单的例子,点击子组件按钮时,改变了父组件显示的信息。

// child-component.vue
<button @click="$emit(\'textChange\', \'子组件被点击了\')">点我</button>

// 父组件中,使用子组件
<template>
  <div>
    <div>{{ msg }}</div>
    <ChildComponent @textChange="msg = $event"></ChildComponent>
  </div>
</template>

<script>
  import ChildComponent from "./child-component"
  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: \'test msg!\'
      }
    }
  }
</script>

prop 类型、验证以及默认值
这三块内容在官网篇幅还挺长的,感觉上重点却不多,我们上面注册props的时候使用的数组,如:["title"],其实实际开发过程中,为了传值的清晰,我们用的都是对象,此外我们会指定其类型,验证规则,以及给出默认值,三者都是可选的,看下面的例子:

export default {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: \'hello\' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return [\'success\', \'warning\', \'danger\'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同,这不是一个工厂函数 —— 这是一个用作默认值的函数
      default() {
        return \'Default function\'
      }
    }
  }
}

注意:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

另外,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
但是,如果prop传递的是一个对象或者数组,我们是可以改变其内部的数据的,同时这个改变会变更对象或数组本身,从而影响到其所在父组件的状态。

vue3的新选项emits
vue 3 提供了一个 emits 选项,和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。emits 选项中列出的事件不会从组件的根元素继承,也将从$attrs property中移除。

emits 可以是数组或对象,从组件触发自定义事件,emits 可以是简单的数组,也可以是对象,后者允许配置事件验证(因为返回false也依旧会继续调用事件,所以作者本人没理解验证这块,有知道的小伙伴欢迎留言)。使用如下:

emits: {
  // 没有验证函数
  click: null,

  // 带有验证函数
  submit: payload => {
    if (payload.email && payload.password) {
      return true
    } else {
      return false // 返回false事件依旧会继续被调用
    }
  }
}

因为不声明emits也可以使$emit来调用传递的事件,所以看似用处不大,但声明首先可以使代码清晰,可以一眼看到向其父组件透传的事件。同时需要向其父组件透传原生事件(如:@ckick)的组件来说,不声明会导致事件被触发两次,而声明可以避免这类问题。

provide / inject 多层嵌套组件通信

使用场景:
1、多层嵌套组件传值
2、父子组件相互寻找比较麻烦,如slot


简单示例:

// 父组件 提供对象
provide: {
  user: \'John Doe\'
}

// 子组件,接收对象
inject: [\'user\'],
created() {
  console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
}

访问组件实例 property(用this),我们需要将 provide 转换为返回对象的函数

// 父组件
data() {
  return {
    userName: \'test name\',
  }
},
provide() {
  return {
    user: this.userName
  }
}

响应性注意这里传递的是值,并不是响应式的,官网建议分配一个组合式 API computed property:

// 来自官网的建议
todoLength: Vue.computed(() => this.todos.length)

个人建议直接传递一个对象过去,利用指针传递来实现响应式。(简单粗暴)如果非要了解可以关注后续再写文章中关于 reactive provide/inject 的信息

$attrs / $parent / $refs 能抓到猫就是好老鼠系列

$attrs 包含了父作用域中不作为组件 props 或 emits 的 attribute 绑定和事件。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用。
示例:

// 父组件中
<ChildComponent title="123" titleProp="456"></ChildComponent>

// 子组件中
props: [\'titleProp\'],
created() {
  console.log(this.$attrs.title); // 123
  console.log(this.$attrs.titleProp); // undefined
  
  console.log(this.title); // undefined
  console.log(this.titleProp); // 123
}

$parent 这是父实例,如果当前实例有的话。简单粗暴拿着实例各种用。

$refs 一个对象,持有注册过ref的所有 DOM 元素和组件实例。父组件使用其可以轻易的获取子组件,并各种使用。

eventBus 事件总线vue3不支持了

在绝大多数情况下,不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案,但从长期来看,它维护起来总是令人头疼。
如果非得要用,可以使用一些外部第三方库,例如 mitt 或 tiny-emitter

// eventBus.js
import emitter from \'tiny-emitter/instance\'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args),
}

vuex 和 自定义共享对象

vuex 轻松获取响应式的全局数据。

业务独立的组件通信更推荐的做法是自定义一个js对象,用js对象来保存共享数据和函数。export是一个对象的话,import之后访问的是同一个对象,其可以方便的提供数据共享和函数调用。此外,如果想要不同的对象可以export一个工厂函数。

总结

  • props / emits 应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
  • provide / inject 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。
  • provide / inject 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”,即 prop 需要通过许多层级的组件传递下去,但这些组件本身可能并不需要那些 prop。
  • prop 逐级透传也可以通过重构以使用插槽来避免。如果一个中间组件不需要某些 prop,那么表明它可能存在关注点分离的问题。在该类组件中使用 slot 可以允许父节点直接为它创建内容,因此 prop 可以被直接传递而不需要中间组件的参与。
  • 全局状态管理,比如 Vuex

Vue2.x中的父子组件相互通信

原理


在 Vue.js 中,父子组件的关系可以总结为 props down, events up 

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

业务场景


这里指的是直接父子级关系的通信

  • 美女(子组件)将消息发送给大群(父组件)
  • 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件)

父组件


template

<template>
    <div>
        <p>群消息girl:</p>
        <div>
            {{ somebody }} 说: 我 {{ age }} 了。
        </div>
        <hr>
        <v-girl-group 
                :girls="aGirls" 
                :noticeGirl="noticeGirl"
                @introduce="introduceSelf"></v-girl-group>
    </div>
</template>

 

注意的点:

  • 这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化noticeGirl方法就会触发
<script>
import vGirlGroup from \'./GirlGroup\'

export default {
    name: \'girl\',
    components: {
        vGirlGroup
    },
    data () {
        return {
            aGirls:[{
                name:\'小丽\',
                age:22
            },{
                name:\'小美\',
                age:21
            },{
                name:\'小荷\',
                age:24
            }],
            somebody:\'\',
            age:\'\',
            noticeGirl:\'\'
        }
    },
    methods: {
        introduceSelf (opt) {
            this.somebody = opt.name;
            this.age = opt.age;

            // 通知girl收到消息
            this.noticeGirl = opt.name + \',已收到消息\';
        }
    }
}

</script>

 

注意的点:

  • 这里methods中定义的方法introduceSelf就是父组件接收到子组件发出的$emit的事件处理程序

子组件


template

<template>
    <div>
       <ul>
           <li v-for="(value, index) in girls">
                {{ index }} - {{ value.name }} - {{ value.age }} 
                <button @click="noticeGroup(value.name,value.age)">发送消息</button>
            </li> 
       </ul>
       <div>接收来自大群的消息:{{ noticeGirl }}</div>
    </div>
</template>

 

script

<script>
export default {
    name: \'girl-group\',
    props: {
        girls: {
            type: Array,
            required: true
        },
        noticeGirl: {
            type: String,
            required: false
        }
    },
    methods: {
        noticeGroup (name, age) {
            this.$emit(\'introduce\',{
                name: name,
                age: age
            })
        }
    }
}
</script>

 

注意的点:

  • 子组件使用$emit发出自定义事件

相比于Vue1.x的变化:

  • $dispatch 和 $broadcast 已经被弃用

*官方推荐的通信方式

结果


以上是关于vue3.x组件间通信,实用小技巧都在这里的主要内容,如果未能解决你的问题,请参考以下文章

CSS文字处理实用小技巧总结

Chrome 实用调试技巧

win10小技巧

Android课程---Android Studio使用小技巧:提取方法代码片段

微信小程序 组件间通信与事件

Vue 组件间的通信方式