Vue2组件created函数中无法更新data属性问题求助

嘿，作为Vue2新手碰到这些问题真的太常见了，我帮你拆解成两个部分来解决：

一、created()里用this更新data失效的问题 #

最常见的原因是this的作用域不对，比如你在created里用了普通函数（比如setTimeout、Promise回调这类），此时函数内部的this已经不是Vue实例了。给你两种解决方案：

方案1：用箭头函数（推荐） #

箭头函数会继承外部作用域的this，也就是Vue实例：

created() {
  // 比如异步操作后更新data
  setTimeout(() => {
    this.yourDataProperty = "更新后的值"; // 这里this指向正确
  }, 1000);
}

方案2：提前保存this到变量 #

如果习惯用普通函数，可以把Vue实例的this存到一个变量里（比如self、vm），然后在函数里用这个变量：

created() {
  const vm = this; // 保存Vue实例的引用
  setTimeout(function() {
    vm.yourDataProperty = "更新后的值"; // 用vm代替this
  }, 1000);
}

另外再确认下你的data写法是否正确——Vue2组件的data必须是一个返回对象的函数，不能直接写对象：

// 正确写法
data() {
  return {
    yourDataProperty: ''
  }
}

// 错误写法（会导致组件复用时数据共享）
data: {
  yourDataProperty: ''
}

二、兄弟组件接收emit信息更新data的问题 #

Vue2里兄弟组件不能直接通信，得通过父组件中转或者事件总线来实现，我给你讲两种最实用的方式：

方式1：父组件作为中间件（更规范，推荐新手用） #

步骤很清晰：

1. 发送方组件（兄弟A）：点击时通过$emit触发事件并传递数据

// 组件A的方法
handleClick() {
  this.$emit('send-to-sibling', 要传递的数据);
}

2. 父组件：监听组件A的事件，把数据存到自己的data里，再传递给组件B

<!-- 父组件模板 -->
<component-a @send-to-sibling="handleReceiveData"></component-a>
<component-b :passed-data="sharedData"></component-b>

// 父组件脚本
data() {
  return {
    sharedData: ''
  }
},
methods: {
  handleReceiveData(data) {
    this.sharedData = data; // 接收组件A的数据并保存
  }
}

3. 接收方组件（兄弟B）：通过props接收父组件的数据，如果要存在自己的data里，可以用watch监听props变化：

// 组件B脚本
props: {
  passedData: {
    type: String, // 根据你的数据类型调整
    default: ''
  }
},
data() {
  return {
    localData: ''
  }
},
watch: {
  passedData(newVal) {
    this.localData = newVal; // 把父组件传的值更新到自己的data里
  }
}

方式2：事件总线（适合简单场景） #

如果你的项目不大，不想麻烦父组件，可以用事件总线：

1. 全局注册事件总线：在main.js里添加

import Vue from 'vue';
Vue.prototype.$bus = new Vue(); // 把$bus挂载到Vue原型上

2. 发送方组件（兄弟A）：点击时通过$bus.$emit发送事件

handleClick() {
  this.$bus.$emit('data-updated', 要传递的数据);
}

3. 接收方组件（兄弟B）：在created/mounted里监听事件，记得销毁事件防止内存泄漏

created() {
  // 监听事件，用箭头函数保证this指向Vue实例
  this.$bus.$on('data-updated', (data) => {
    this.localData = data; // 更新自己的data
  });
},
beforeDestroy() {
  // 组件销毁时移除事件监听
  this.$bus.$off('data-updated');
}

这样应该就能解决你的两个问题啦，要是还有细节不清楚可以再问哦～

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