<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 子组件 -->
<com1
ref="zizujian"></com1>
父组件
<h2 id="mes"
ref="message">父组件的内容</h2>
<input type="button" value="获取页面中的信息" @click="getdominfo"
ref="anniu">
</div>
<template id="cont1">
<div>
子组件
</div>
</template>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
// 以前想要获取页面中的dom元素，我们可以使用document.getElementById('mes').innerText获取dom内容
// getdominfo() {
// console.log(document.getElementById('mes').innerText)
// }
//但是vue不建议直接操作dom元素，所以可以使用ref进行操作，ref是vm实例的属性，在控制台，我们输入vm就可以看到vm身上的相关属性
当我们在页面中添加ref属性后，在控制台输出如下图：
//我们将页面元素中添加ref属性，即可在控制台看到
//
页面中要写ref 不能添加s,因为我们是对单个h2进行操作的
getdominfo() {
//
输出时，我们要使用this.$refs ，这里的要添加refs，因为我们的页面中可能有多个ref
console.log(this.$refs.message.innerText)
//获取子组件的dom
console.log(this.$refs.zizujian.mess) //获取子组件的data数据
this.$refs.zizujian.show() //获取子组件的方法
}
},
components: {
com1: {
template: "#cont1",
data() {
return {
mess: "子组件中的数据"
}
},
methods: {
show() {
console.log("子组件的方法")
}
},
}
}
})
</script>
</body>
</html>