前几篇都是传递父子组件传递参数的各种写法，今天看一下，自组件通过$panrent $root直接操作父组件 根组件的。
App.vue
根组件包含子组件ConA
<template>
<div>
Root - {{data}}
<ConA ref="conA"></ConA>
</div>
</template>
<script>
import ConA from './ConA.vue';
export default {
data(){
return {
data:0
}
},
components: {
ConA,
},
}
</script>ConA.vue
子组件包含子组件ConAA
即：App为根组件，ConA为App子组件，ConAA为ConA的子组件。App为ConA ConAA的根组件
点击ConA组件的按钮ConA，会操作其父组件的变量data+2
<template>
<div>
ConA - {{ data }}
<button @click="handleConA">ConA</button>
<ConAA></ConAA>
</div>
</template>
<script>
import ConAA from './ConAA.vue';
export default {
data() {
return {
data:0
}
},
components:{
ConAA
},
methods:{
handleConA(){
this.$parent.data = this.$parent.data+1
}
}
}
</script>ConAA.vue
点击ConAA组件的按钮parent，会操作其父组件ConA的变量data+1
点击ConAA组件的按钮root，会操作其跟组件App的变量data+1
<template>
<div>
<button @click="handleParent">parent</button>
<button @click="handleroot">root</button>
</div>
</template>
<script>
export default {
data() {
return {
isShowA: true
}
},
methods:{
handleParent(){
this.$parent.data = this.$parent.data+1
},
handleroot(){
this.$root.data = this.$root.data+1
}
}
}
</script>
