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>