vue--Non-prop属性

公共部分：

<div id="root"></div>

<script src="https://unpkg.com/vue@next"></script>

---

 

1.inheritAttrs属性：

<script>
        //Non-prop属性
        const app = Vue.createApp({
            template: `
              <div>
                <counter msg='hello' />
              </div> 
            `
        });

        // 创建全局组件
        app.component('counter', {
            //不继承父组件传递来的Non-prop属性
            inheritAttrs: false,
            template: `<div>Counter</div>`,
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

 

---

2.Non-prop属性：

<script>
        //Non-prop属性
        const app = Vue.createApp({
            template: `
              <div>
                <counter msg="hello" msg1="hello1" />
              </div> 
            `
        });

        // 创建全局组件
        app.component('counter', {
             mounted() {
                console.log(this.$attrs);
            },

            //v-bind="$attrs" 将父组件传递过来的所有 Non-prop属性 都放到该元素上
            //v-bind:x="$attrs.x" 拿到父组件的某一个 Non-prop属性
            template: `
            <div v-bind:msg="$attrs.msg">Counter</div>
            <div v-bind="$attrs">Counter</div>
            <div v-bind:msg1="$attrs.msg1">Counter</div>
            `,
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

 

 

---