<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<comp ref='furong'> </comp>
<button type="button" @click="refs">获取子</button>
</div>
<template id="comp">
<div id="">
<p>{{message}}</p>
</div>
</template>
<script>
// 子组件
const comp = Vue.extend({
template: '#comp',
data() {
return {
message: 'Hello Vue.js!',
books: [{
name: 'HTML/HTML5基础',
price: 15.5,
},
{
name: '高健壮性CSS',
price: 16.5,
},
{
name: '深入学习JS',
price: 17.5,
},
]
}
},
})
// root
const app = new Vue({
el: '#app',
components: {
comp,
},
methods: {
refs() {
// 不常用$children
console.log(this.$children);
// 常用$refs 对象类型（默认空对象）
console.log(this.$refs.furong.message);
}
}
})
</script>
</body>
</html>
