vue 使用ref获取DOM元素和组件引用

在vue中可以通过ref获取dom元素，并操作它，还可以获取组件里面的数据和方法。

HTML部分：

     <div id="app">
         <input type="text" value="input 的值" ref="myinput" />
         <h3 id="h3" ref="myh3">这是H3 </h3>

         <hr>
         <com1 ref="mycom1"></com1>

         <button @click="click">ref</button>
     </div>

JS部分：

     // 定义一个组件
     var com1 = {
         template: `<div>这是子组件的内容</div>`,
         data() {
             return {
                 msg: "子组件的数据"
             }
         },
         methods: {
             fun1() {
                 console.log("子组件的fun1方法");
             }
         }
     }

     // vue实例
     var app = new Vue({
         el: "#app",
         // data() { return {} },
         methods: {
             click() {
                 console.log(this.$refs.myinput.value);
                 console.log(this.$refs.myh3.innerHTML);
                 console.log(this.$refs.mycom1.msg);
                 this.$refs.mycom1.fun1();
             }
         },
         components: {
             com1
         }
     });

点击 ref 按钮，得到以下结果：