Vue组件动态更新div文本失效问题求助

嘿，我一下子就发现问题出在哪了！你直接通过MainComponent.methods.receiveData(12)调用方法的方式，根本没有操作到页面上实际渲染的主组件实例，自然不会触发Vue的响应式更新。

为什么原来的写法无效？ #

MainComponent是你的组件构造函数，MainComponent.methods只是构造函数上挂载的方法集合而已。当你直接调用这个方法时，方法内部的this并不是指向正在运行的主组件实例，而是指向MainComponent.methods这个对象。所以你修改的this.x根本不是主组件data里的那个响应式数据，控制台的打印可能只是迷惑了你，但实际上页面上的组件实例数据完全没变化。

方案一：通过ref获取子组件实例调用方法 #

如果外部组件是父组件（你已经import并使用了MainComponent），可以用ref获取子组件的实例，然后调用它的方法：

修改外部组件代码：

<template>
  <div class="R">
    <!-- 给子组件加ref标识 -->
    <MainComponent ref="mainInstance" />
  </div>
</template>
<script>
import MainComponent from './MainComponent'
export default {
  components: { MainComponent },
  data() {
    return { }
  },
  mounted() {
    // 挂载时绑定点击事件
    this.clickListener();
  },
  methods: {
    clickListener() {
      // 用箭头函数保留this指向，不然this会指向被点击的DOM元素
      $('.R').on('click', () => {
        // 生成不同的随机数模拟不同数据
        const randomData = Math.floor(Math.random() * 100);
        // 通过ref获取子组件实例，调用方法传递数据
        this.$refs.mainInstance.receiveData(randomData);
      });
    }
  }
}
</script>

主组件的代码可以保持不变，因为receiveData方法确实能修改实例的响应式数据x，只要调用它的是正确的组件实例就行。

方案二：用props + 父组件管理数据（更符合Vue的数据流规范） #

Vue推荐单向数据流，父组件管理数据，通过props传给子组件，这样代码更清晰易维护：

修改主组件代码：

<template>
  <div class="small">
    <div v-text="x"></div>
  </div>
</template>
<script>
export default {
  // 把x改成props，接收父组件传递的数据
  props: {
    x: {
      type: Number,
      default: 0
    }
  }
}
</script>

修改外部组件代码：

<template>
  <div class="R">
    <!-- 通过props把父组件的data传给子组件 -->
    <MainComponent :x="parentData" />
  </div>
</template>
<script>
import MainComponent from './MainComponent'
export default {
  components: { MainComponent },
  data() {
    return { 
      parentData: 0 // 父组件自己管理数据
    }
  },
  mounted() {
    this.clickListener();
  },
  methods: {
    clickListener() {
      $('.R').on('click', () => {
        // 每次点击更新父组件的数据，子组件会自动响应
        this.parentData = Math.floor(Math.random() * 100);
      });
    }
  }
}
</script>

这样每次点击外部组件的R容器，父组件的parentData会更新，通过props传递给主组件，主组件的视图就会自动同步更新啦！

内容的提问来源于stack exchange，提问作者Petur Ulev