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: `
            
            
            
        `,
        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: `
            

                
inheritAttrs为true,继承父组件传过来的non-props属性
                
{
      {content}}--{
      {a}}--{
      {b}}---{
      {c}}----non-props-----{
      {content2}}
                
non-props中content2属性值为{
      {$attrs.content2}}
                
组件test
            
        `
    })
    app.component('test1', {
     
        inheritAttrs: false,
        props: ['content', 'a', 'b', 'c'],
        template: `
            

                
inheritAttrs为false,不继承父组件传过来的non-props属性
                
{
      {content}}--{
      {a}}--{
      {b}}---{
      {c}}----non-props-----{
      {content2}}
                
non-props中content2属性值为{
      {$attrs.content2}}
                
组件test1
            
        `
    })
    app.component('test2', {
     
        mounted() {
     
            //页面渲染完成之后执行
            //此处也可以获取到non-props属性
            console.log(this.$attrs.msg)
        },
        template: `
              
测试11
              
测试12
              
测试13
              
测试14---msg---{
      {$attrs.msg}}
              
组件test2
            `
    })

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