<!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>