想在子组件中直接访问父组件,可以通过$parent
我们允许通过 $parent来访问父组件,但是在真实开发中尽量不要这样做。
子组件应该尽量避免直接访问父组件的数据,因为这样耦合度太高了
可以通过$root访问孙组件
<body>
<div id="opp">
<cpn></cpn>
</div>
</body>
<template id="app">
<div>
<h2>我是cpn组件</h2>
<button @click='butclick'>按钮</button>
<ccpn></ccpn>
</div>
</template>
<template id="bpp">
<div>
<h2>这是孙组件</h2>
<button @click='butclickss'>按钮</button>
</div>
</template>
<script>
const opp = new Vue({
el:'#opp',
data:{
message:'你好啊'
},
//子组件
components:{
cpn:{
template:`#app`,
methods:{
butclick(){
//访问父组件
console.log(this.$parent.message);
},
},
data(){
return{
name:'这是cpn组件的name'
}
},
//孙组件
components:{
ccpn:{
template:`#bpp`,
methods:{
butclickss(){
// console.log(this.$parent.name)
//访问根组件
console.log(this.$root.message)
}
}
}
}
},
}
})
</script>