非prop特性指的是，一個未被組件注冊的特性。當組件接收了一個非prop特性時，該特性會被添加到這個組件的根元素上。

1.替換/合并已有的特性

對于絕大多數特性來說，從外部供給組件的值會替換掉組件內部設置好的值，如【例1】

【例1】

<div id="app"><my-cmp type='radio'></my-cmp> </div> const vm = new Vue({el: "#app",components: {'my-cmp': {template: `<input type="text">`}} })

【結果】

【注】class 和 style 特性會將兩邊的值合并起來，如【例2】

【例2】

<div id="app"><my-cmp class="b"></my-cmp> </div> <script>const vm = new Vue({el: "#app",components: {'my-cmp': {template: `<div class="a"></div>`}}}) </script>

【結果】

2.禁用特性繼承

如果不希望組件的的根元素繼承特性，那么可以在組件選項中設置 inheritAttrs: false ，如【例3】

<div id="app"><my-cmp type="radio"></my-cmp> </div> <script>const vm = new Vue({el: "#app",components: {'my-cmp': {template: `<input type="text"></input>`,inheritAttrs: false}}}) </script>

【結果】

該屬性可以配合實例的 $attrs 屬性使用，這個屬性是一個對象，鍵名為傳遞的特性名，鍵值為傳遞的特性值

<div id="app"><my-cmp value="請輸入用戶名" label="用戶名" type="text" v-on:input="print"></my-cmp> </div> <script>const vm = new Vue({el: "#app",components: {'my-cmp': {inheritAttrs: false,props: ['value', 'label','type'],template: `<label>{{ label }}<input v-bind="$attrs"v-bind:value="value"v-bind:type="type"v-on:input="$emit('input',$event.target.vlaue)"></input></label>`,}},methods: {print() { }}}) </script>

【結果】

【注】inheritAttrs：false 選項不會影響 style 和 class 的綁定

總結

以上是生活随笔為你收集整理的vue_组件_非prop特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。