如何使用全局变量从子组件重新渲染父组件？

Question

如何触发子组件重新渲染父组件。 我读到当计算属性发生变化时会发生这种情况。 创建了一个全局变量

new Vue({
  // global variables
  data: {
    bUpdate: false
  },
}).$mount('#app');

在父组件中创建一个计算属性：

computed: {
  compProp{
    return this.$root.bUpdate;
  },
}

在子组件中，在callReender()方法中，我改变了全局变量的值：

methods: {
  callReender() {
     this.$root.bUpdate = !this.$root.bUpdate;
  }
}

父组件不渲染。 为什么？

Answer 1

根数据是私有的，无法从外部访问。此外，数据值是反应性的，因此您不需要使用计算。一个潜在的解决方案是使用根中定义的方法。

这里是一段代码，展示了我们如何访问和操作这些私人数据。

Vue.component('my-child', {
 template: `<h3>
 I am the child 
 <button v-on:click="clicked" style="background-color:green; font-size: 1rem;">
  click me to change the parent data
 </button>
 </h3>`,
 
 methods:{
   clicked(){
    this.$root.toggle();
   }
 },
 
});

const app = new Vue({
  template:`<div>
  <h1>I am the root and 'bUpdate' is: <strong> {{bUpdate}} </strong> </h1>
  <my-child/>
  </div>
  `,
  
  data: {
    bUpdate: false
  },
  
  methods:{
   toggle(){
    this.bUpdate = !this.bUpdate;
   },
   getBUpdate(){
     return this.bUpdate
   },
  }
})
.$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

这是一个similar question或this one.