组件 - ref属性查找组件 - 《vue》

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <my-com ref="myCom"></my-com>
    </div>
    <!-- 组件模板 -->
    <template id='myTem'>
        <div>
            <h1>{{name}}</h1>
        </div>
    </template>
    <script>
        Vue.component('myCom', {
            template: '#myTem',
            data(){ 
                return{
                    name: "childCom"
                }
            },
            methods:{
                childChange(data){
                    this.name = data
                }
            },
            mounted() {
                console.log(this)
            },
        })
        new Vue({
            el: '#myApp',
            mounted() {
                // 通过ref可以查找组件标签,找到的是组件的实例对象(组件内部的this)
                console.log(this.$refs.myCom)
                // 找到组件实例对象后, 可以读取组件data数据并更新
                console.log(this.$refs.myCom.name)
                this.$refs.myCom.name = "张三"
                // 还可以调用子组件中的自定义函数
                this.$refs.myCom.childChange("李四")
            },
        })
    </script>
</body>