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