函式呼叫-如何設計引數 可變引數函式
阿新 • • 發佈：2020-12-30
Vue中inheritAttrs的使用
<body> <div id="wxApp" class="appclass"> <blog-post title="標題" wx-attr1="未定義屬性" wx-attr2="未定義屬性" style="color:red" class="wxclass"></blog-post> </div> <script> Vue.component('blog-post',{ inheritAttrs:true, props:{ title:String, }, template:` <div wx-attr1="hello" class="div1" style="width:500px" v-bind="$attrs" > <h1>title:{{title}}</h1> <ul> <li v-for="item in $attrs">{{item}}</li> </ul> </div>`, }) var wxApp = new Vue({ el:"#wxApp", data:{ }, methods:{ } }); </script> </body>
當inheritAttrs取值為true，且模板裡繫結v-bind="$attrs"時,自定義屬性可以插入到我們的元件中，並且不會覆蓋掉在元件中相同未定義屬性名稱的值，結果如下
當inheritAttrs取值false時，且模板裡繫結v-bind="$attrs"時自定義屬性可以插入到我們的元件中，但會覆蓋掉在元件中相同未定義屬性名稱的值，結果如下
當模板未繫結v-bind="$attrs"時
<body> <div id="wxApp" class="appclass"> <blog-post title="標題" wx-attr1="未定義屬性" wx-attr2="未定義屬性" style="color:red" class="wxclass"></blog-post> </div> <script> Vue.component('blog-post',{ inheritAttrs:true, props:{ title:String, }, template:` <div wx-attr1="hello" class="div1" style="width:500px" > <h1>title:{{title}}</h1> <ul> <li v-for="item in $attrs">{{item}}</li> </ul> </div>`, }) var wxApp = new Vue({ el:"#wxApp", data:{ }, methods:{ } }); </script> </body>
inheritAttrs取值為true時，自定義屬性可以插入到我們的元件中，並且會覆蓋掉在元件中相同未定義屬性名稱的值，結果如下
inheritAttrs的值為false時，自定義屬性是插入不到我們的元件中的，結果如下
