vue组件事件属性穿透

叁歲伎倆 2022-10-01 15:52 226阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

# 组件事件属性穿透 #

## 属性 ##

*  `$attrs`包含从父组件传过来的属性，但不包含子组件中prop中的属性以及`class`和`style`，所以对于那些html元素原生属性，可以不用再子组件中声明，直接从父组件中传进来就好

// 子组件
    <template>
     <div>
         <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/>
     </div>
    </template>
      props: {
        test: {
          type: String,
          default: '123456'
        }
      },
      created () {
        console.log(`props:%o`, this.$props)  // {test: '测试'}
        console.log('attrs:%o', this.$attrs) // {value: '测试'}
      },
    
      // 父组件
     <myInput :value="value" :class="class_" :style='style' :test='test' @input1="input"/>
       data () {
        return {
          style: {
            color: 'red'
          },
          value: '测试',
          class_: 'test',
          test: '测试'
        }
      }

*  **注意:**

1.  由于在这个组件中input并不是根元素，默认情况下父组件的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上，在该例子中根节点div会有`value="测试"`的属性，所以子组件需要设置 [inheritAttrs: false][inheritAttrs_ false]去掉根元素默认行为，这样就可以通过实例属性 `$attrs` 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。
2.  在子组件修改props，却不会修改父组件，这是因为extractPropsFromVNodeData中是通过浅复制将父组件中数据传递给props的。 浅复制意味着在子组件中对对象和数组的props进行修改还是会影响父组件，这就违背了单向数据流的设计。因此需要避免这种情况出现。

## 事件 ##

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

computed: {
        listeners () {
          return {
            ...this.$listeners,
            // 下面写需要从子组件事件传值到从父组件中的
            input: e => {
              this.$emit('input1', e.target.value)
            }
          }
        }
      },

转载于:https://my.oschina.net/u/3407699/blog/3048540

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/8315da5bf77844438c7f8bada6725618.png
[inheritAttrs_ false]: https://cn.vuejs.org/v2/api/#inheritAttrs