v-once ref provide / inject

<script>
       // v-once 让某个元素标签只渲染一次
       // ref  获取  DOM节点/组件引用   的语法  this.$refs.xxx / this.$refs.common.sayHello()
       // provide / inject  跨组件 多级传递参数
       var app = Vue.createApp({
            data(){
                return {
                    count:4
                }
            },
            mounted(){
                // console.log(this.$refs.count);
                // this.$refs.count.innerHTML = 'hello'

                // console.log(this.$refs.common);
                // this.$refs.common.sayHello()

            },
            // template:`
            //     <div>
            //         <div ref="count">
            //             {{count}}
            //         </div>  
            //     </div>      
            // `,

            // template:`
            //     <div>
            //         <common-item ref="common" />  
            //     </div>      
            // `,

            // provide:{
            //     count: 3
            // },
            provide(){
                return {
                    count: this.count
                }
            },
            template:`
                <div>
                    <child :count="count" />
                    <button @click="count += 1">Add</button>  
                </div>      
            `,

        })

        // app.component('common-item',{  
        //     methods:{
        //         sayHello(){
        //             alert('hello')
        //         }
        //     } ,
        //     template:` <div>hello world</div>  `
        // })


        app.component('child',{    
            template:`<div> <child-child /> </div>`
        })

        app.component('child-child',{  
            inject:['count'],
            template:`<div>{{count}}</div>`
        })


       const vm =  app.mount('#root')

    </script>