24-Vue中的$attrs和inheritAttrs

2022/1/13 6:03:44

编程Tag： vue 组件 v2 props attrs 24 v1

本文主要是介绍24-Vue中的$attrs和inheritAttrs，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

感觉这个问题官方文档的描述有点不清晰，同时没有给出一个很直观的例子，今天在这个点上纠结了半天。

inheritAttrs

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

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

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

此时它会作为这个节点的attribute显示

如果当这个没有定义的属性比较特殊的时候，可能会对我们的组件产生意外的影响，比如定义了一个未接收的type属性，那么input框的类别可能就改变了。

要防止将这个外部传来的值作为attribute，可以在组件中加上inheritAttrs:false

$attrs

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

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

下面贴一个demo

<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接收所有值，要简便了不少

这篇关于24-Vue中的$attrs和inheritAttrs的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

24-Vue中的$attrs和inheritAttrs

inheritAttrs

$attrs

相关编程文章