vue_组件_非prop特性

非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 的绑定