$root:访问根组件
$parent：访问父组件
运行结果
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>cpn组件</h2>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2>ccpn组件</h2>
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
new Vue({
el:"#root",
data:{
message:"最外层的VUE组件"
},
components:{
cpn:{
template:"#cpn",
data(){
return {name:"父组件"}
},
components:{
ccpn:{
template:"#ccpn",
methods:{
btnClick(){
//1.访问父组件
console.log(this.$parent);
console.log(this.$parent.name);
//2.访问根组件
console.log(this.$root);
console.log(this.$root.message);
}
}
}
}
}
},
methods:{
},
computed:{
},
filters:{ //过滤器
}
})
</script>
</body>
</html>
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
