<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h1>我是子组件cpn</h1>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2> 我是子组件cpn的子组件ccpn</h2>
<button @click = "btnClick">点击打印</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data() {
return {
}
},
components:{
cpn: {
template: '#cpn',
data() {
return {
name: '我是cpn的name'
}
},
components:{
ccpn: {
template: '#ccpn',
methods: {
btnClick() {
console.log(this.$parent.name);
}
},
}
}
},
}
})
</script>
</body>
</html>
通过$parent,ccpn这个组件取到了父组件cpn的name。但是这个方法开发中会使组件失去独立性,复用性不高。
注:我所有的vue知识皆通过“2019年coderwhy vue-vuejs从入门到精通教程”这个视频所习得。
$root,访问根组件:
ccpn: {
template: '#ccpn',
methods: {
btnClick() {
console.log(this.$root);
}
},
}
子组件ccpn会直接访问到Vue实例。