24-Vue中的$attrs和inheritAttrs

2022/1/13 6:03:44

本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程