ref获取元素 vue 删除子元素_vue 使用ref获取DOM元素和组件引用

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

HTML部分：

这是H3

---

ref

JS部分：

// 定义一个组件

var com1 = {

template: `

这是子组件的内容

`,

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

}