欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue中的inheritAttrs、$attrs和$listeners

程序员文章站 2022-03-27 18:05:31
...

1.inheritAttrs

  • 类型：boolean
  • 默认值：true
  • 详细：

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

注意：这个选项不影响 class 和 style 绑定。

当我们在使用组件时，为其传递的参数要在组件的props中进行定义，才能够使用。如果没有定义，则这个属性会作为这个DOM结构的attribute被渲染。

比如我们定义一个自定义组件father，给它传入一个undefinedValue，而在props中没有接收它:

<father 
    v-bind:undefinedValue="'this is an undefinedValue'" 
></father>

此时它会作为这个节点的attribute显示
vue中的inheritAttrs、$attrs和$listeners
如果当这个没有定义的属性比较特殊的时候，可能会对我们的组件产生意外的影响，比如定义了一个未接收的type属性，那么input框的类别可能就改变了。

要防止将这个外部传来的值作为attribute，可以在组件中加上inheritAttrs:false
使用方式是在子组件的内部添加，如下：

export default {
  props: ['father '],
  inheritAttrs: false,
  mounted() {
    this.$emit('test2')
  }
}

2.$attrs

  • 类型：{ [key: string]: string }
  • 只读
  • 详细：
    包含了父作用域中不作为 prop 被识别（且获取）的 attribute 绑定（class 和 style 除外）。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定（class 和 style 除外），并且可以通过 v-bind="$attrs“” 传入内部组件–在创建高级别的组件时非常有用

在Vue中，如果有多层组件嵌套，那么要把值从最外层父组件传给底层的组件则需要一层层在props中接收所有的值，并传给下一层级的组件。

解决这个问题的方法是，在每一层级的组件中，只在props中定义自己需要的数据，并将 a t t r s 传 递 给 下 一 层 级 的 组 件 ， 其 中 attrs传递给下一层级的组件，其中 attrs传递给下一层级的组件，其中attrs是一个对象，其中属性是所用目前还没有被接收的attributes，所以给下一层级传递$attrs时可以用传递对象时的快捷写法

<body>
	<div id="app">
		<father :v1="'value1'" :v2="'value2'" :v3="'value3'"></father>
	</div>
</body>

<script>
	Vue.component('father', {
  		inheritAttrs: false,
  		props: ['v1'],
  		template: `
		  	<div>
				<p>v1 is {{v1}}</p>
				<son v-bind='$attrs'></son>
			</div>
		  `
	})

	Vue.component('son',{
		props:['v2'],
		template:"<div ><p>v2 is {{v2}}</p><grandSon v-bind='$attrs'></grandSon></div>"
	})

	Vue.component('grandSon',{
		props:['v3'],
		template:"<p>v3 is {{v3}}</p>"
	})

	var vm = new Vue({
		el:'#app',
		data:{
		},
	})
</script>

在调用最外层组件father时，传入了三个值，v1、v2、v3，father组件中只用了v1，同时将其余值通过$attrs传递给下一层的son，son组件只用了v2，同理将值传给grandSon

通过这种方法，可以将外部传入的值用到需要的地方，相比于每一层用props接收所有值，要简便了不少

3.$listeners

  • 类型：{ [key: string]: Function | Array }
  • 只读
  • 详细：
    包含了父作用域中的（不含 .native修饰器的） v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件-- 在创建更高层次的组件时非常有用

使用方法同上

相关标签： vue vue

上一篇： vue3组件的inheritAttrs属性

下一篇： 关于php购物网站支付paypal的使用方法

推荐阅读