vue中non-props属性

......
<script>
    /*
       Non-prop属性：父组件给子组件传递内容时，子组件不通过pros接收时，情况如下：
       1.子组件存在单个根节点时
       底层会将父组件传递过来的内容置于子组件最外层dom标签上，变成子组件最外层dom标签的一个属性
       如果不希望在子组件的标签上展示该属性，可以通过inheritAttrs: false,不继承父组件传过来的non-props属性
       2.子组件存在多个根节点时
       如果希望父组件传递过来的non-props指令生效，
       可以通过v-bind指令,v-bind='$attrs'，把父组件传递过来的所有non-props属性放到指定div上
       也可以指定具体属性，如:msg='$attrs.msg'
       3.不管inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性，默认值为true。
     */
    const app = Vue.createApp({
        template: `
            <test v-bind='params' :content2='content2' :msg='msg'/>
            <test1 v-bind='params' :content2='content2' :msg='msg'/>
            <test2 v-bind='params' :msg='msg'/>
        `,
        data() {
            return {
                message: [],
                params: {
                    content: 123,
                    a: 222,
                    b: 333,
                    c: 444
                },
                content2: '测试中~~~',
                msg: '测试non-props属性'
            }
        },
        methods: {
            handleBtnClick(num, event) {
                console.log(event.target)
                this.counter += 2
            }
        }
    })
    // 全局组件-测试
    app.component('test', {
        inheritAttrs: true,
        props: ['content', 'a', 'b', 'c'],
        created(){
            console.log('$attrs',this.$attrs)
        },
        template: `
            <div>
                <div>inheritAttrs为true,继承父组件传过来的non-props属性</div>
                <div>{{content}}--{{a}}--{{b}}---{{c}}----non-props-----{{content2}}</div>
                <div>non-props中content2属性值为{{$attrs.content2}}</div>
                <div>组件test</div>
            </div>
        `
    })
    app.component('test1', {
        inheritAttrs: false,
        props: ['content', 'a', 'b', 'c'],
        template: `
            <div>
                <div>inheritAttrs为false,不继承父组件传过来的non-props属性</div>
                <div>{{content}}--{{a}}--{{b}}---{{c}}----non-props-----{{content2}}</div>
                <div>non-props中content2属性值为{{$attrs.content2}}</div>
                <div>组件test1</div>
            </div>
        `
    })
    app.component('test2', {
        mounted() {
            //页面渲染完成之后执行
            //此处也可以获取到non-props属性
            console.log(this.$attrs.msg)
        },
        template: `
              <div>测试11</div>
              <div v-bind='$attrs'>测试12</div>
              <div v-bind='$attrs'>测试13</div>
              <div :msg='$attrs.msg'>测试14---msg---{{$attrs.msg}}</div>
              <div>组件test2</div>
            `
    })

    /* 注意：使用组件时需要先注册完组件再将该vue实例挂载到root元素上 */
    /* vm代表的就是vue应用的根组件
       vm获取根节点上数据，调用data时，data前加一个$,操作vm时，数据改变，视图也会自动发生改变
       如果该数据是根数据，也可以直接vm. 调用
       */
    const vm = app.mount('#root')
    //app.unmount()//让vue失效
</script>
......