VUE(子伝親)$refsの方式

    
    
    
    




    
    
    

        



    //     ，         
    Vue.component('com-a',{
        template:`
        <div class="com-a">
          <p>com-a   </p>
          <p>{{ message }}</p>
        </div>
        `,
        data(){
            return {
                message:'com-a message'
            }
        },
        methods:{
            hello(){
                console.log('hello com-a')
            }
        }
    })
    //  vue     
    const app  = new Vue({
        el:'#app',
        data:{},
        methods:{
            handleClick(){
                //     document.getElementById，     ref       
                // console.log(this.$refs['coma'])//         com-a     
                // console.log(this.$refs.coma)//         com-a     ,     ，         
                //         
                const dai = this.$refs['coma']
                console.log(dai.message)//com-a message,             
                //       ，           (        ，      )
                dai.message = 'daijie'//      
                dai.hello()//       ，      
            }
        }
    })