说了 父组件直接访问子组件，现在讲 子组件访问父组件:
有这么个代码：
<body> <template id="cpn"> <div style="border: solid red 2px "> <h2>这里是 cpn</h2> <v-ccpn></v-ccpn> </div> </template> <template id="ccpn"> <div style="border: solid blue 1px "> <h2>这里是 ccpn</h2> </div> </template> <div id="app"> <v-cpn></v-cpn> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ app_s1:"却看见更黑暗的家伙（app_s1）" }, methods:{ }, components:{ 'v-cpn':{ template:"#cpn", data(){ return{cpn_s1:"负重一万斤长大(cpn_s1)"} }, components:{ 'v-ccpn':{ template: "#ccpn", data() { return{ccpn_s1:"我想在那里最蓝的大海杨帆(ccpn_s1)"} } } } } } }) </script>
界面：
解析： VUE 实例 app 是跟组件 =》 cpn子组件 =》 ccpn 组件
换句话： 爷组件=》 父组件 =》 子组件
那么 如果子组件要访问 父组件的数据 我们也不用事件传递，直接用：$parent
使用例子：
<body> <template id="cpn"> <div style="border: solid red 2px "> <h2>这里是 cpn</h2> <v-ccpn></v-ccpn> </div> </template> <template id="ccpn"> <div style="border: solid blue 1px "> <h2>这里是 ccpn</h2> <button @click="parent_data_s1">点击直接显示父组件cpn的data中的 s1</button> </div> </template> <div id="app"> <v-cpn></v-cpn> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ app_s1:"却看见更黑暗的家伙（app_s1）" }, components:{ 'v-cpn':{ template:"#cpn", data(){ return{cpn_s1:"负重一万斤长大(cpn_s1)"} }, components:{ 'v-ccpn':{ template: "#ccpn", data() { return{ccpn_s1:"我想在那里最蓝的大海杨帆(ccpn_s1)"} }, methods:{ parent_data_s1(){ //主要看这个函数 贼方便哈！ alert(this.$parent.cpn_s1); } } } } } } }) </script>
别怕 你看图就看懂了他的嵌套 然后慢慢思维跟进然后分析即可。
可以看到很方便 直接即可访问自己的父组件。
但是还是有弊端的 ：
尽管在Vue开发中，我们允许通过$parent 来访问父组件，但是在真实开发中尽量不要 这样做。子组件应该尽量避免直接访问父组件的数据， 因为这样耦合度太高了。因为我们说 组件都独立的。
因为：我们将子组件放在另外一个组件之内， 很可能该父组件没有对应的属性，往往会引 起问题。
注意：
1. $parent 没有下标形式，因为总不可能你有几个爸爸吧 ，为什么$children可以？ 因为 你可以有多个孩子。
2.可以看到这里的button 直接访问 ccpn 的方法，是怎么做到的，因为button定义在 ccpn中,这些是细节，也是基础吧.
还有一个讲完即可：
this.$root 他是直接访问根组件 比如上面写的 那么他就直接访问 vue实例了。
使用例：
<body> <template id="cpn"> <div style="border: solid red 2px "> <h2>这里是 cpn</h2> <v-ccpn></v-ccpn> </div> </template> <template id="ccpn"> <div style="border: solid blue 1px "> <h2>这里是 ccpn</h2> <button @click="root_data_s1">点击直接显示根组件vue实例的data中的 s1</button> </div> </template> <div id="app"> <v-cpn></v-cpn> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ app_s1:"却看见更黑暗的家伙（app_s1）" }, components:{ 'v-cpn':{ template:"#cpn", data(){ return{cpn_s1:"负重一万斤长大(cpn_s1)"} }, components:{ 'v-ccpn':{ template: "#ccpn", data() { return{ccpn_s1:"我想在那里最蓝的大海杨帆(ccpn_s1)"} }, methods:{ root_data_s1(){ //主要看这个函数 贼方便哈！ alert(this.$root.app_s1); } } } } } } }) </script>
$root 在哪里可以被访问，因为他是根组件 啊哈哈。