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 按钮，得到以下结果：