Vue中$props、$attrs和$listeners的使用详解

背景

现在我们来讨论一种情况,父组件与孙子组件怎么通信,我们有多少种解决方案?

  1. 我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力。
  2. 使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件, 这是一种解决方案,但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;如果C中状态的改变需要传递给A, 使用事件系统一级级往上传递 。
  3. 自定义一个Vue 中央数据总线,这个情况适合碰到组件跨级传递消息,但是缺点是 碰到多人合作时,代码的维护性较低,代码可读性低

一、文档描述

(1)$props:当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

(2)$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

(3)$listeners:包含了父作用域中(不含 .native 修饰器的)v-on事件监听器。他可以通过 v-on="listeners"传入内部组件

二、具体使用

1、父组件

<template> <div> <div>父亲组件</div> <Child :foo="foo" :zoo="zoo" @handle="handleFun" > </Child> </div> </template> <script> import Child from './Child.vue' export default { components: { Child }, data() { return { foo: 'foo', zoo: 'zoo' } }, methods: { // 传递事件 handleFun(value) { this.zoo = value console.log('孙子组件发生了点击事件,我收到了') } } } 
 

 

2. 儿子组件(Child.vue)

中间层,作为父组件和孙子组件的传递中介,在儿子组件中给孙子组件添加v-bind="$attrs",这样孙子组件才能接收到数据。

$attrs是从父组件传过来的,且儿子组件未通过props接收的数据,例如zoo

 

js

复制代码

<template> <div class='child-view'> <p>儿子组件--{{$props.foo}}与{{foo}}内容一样</p> <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild> </div> </template> <script> import GrandChild from './GrandChild.vue' export default { // 继承所有父组件的内容 inheritAttrs: true, components: { GrandChild }, props: ['foo'], data() { return { } } } </script>

3. 孙子组件(GrandChild.vue)

在孙子组件中一定要使用props接收从父组件传递过来的数据

 

js

复制代码

<template> <div class='grand-child-view'> <p>孙子组件</p> <p>传给孙子组件的数据:{{zoo}}</p> <button @click="testFun">点我触发事件</button> </div> </template> <script> export default { // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性 inheritAttrs: false, // 在本组件中需要接收从父组件传递过来的数据,注意props里的参数名称不能改变,必须和父组件传递过来的是一样的 props: ['zoo'], methods: { testFun() { this.$emit('handle', '123') } } } </script>

三、总结

从上面的代码,可以看出使用attrsinheritAttrs属性 能够使用简洁的代码,将A组件的数据传递给C组件,该场景的使用范围还是挺广的。

通过listeners,我们在b组件上 绑定 v-on=”$listeners”, 在a组件中,监听c组件触发的事件。就能把c组件发出的数据,传递给a组件。

Logo

前往低代码交流专区

更多推荐