uniapp 子组件修改父组件的值并更新子组件

在UniApp中，当子组件需要修改父组件的状态并且希望子组件自身也随着这个变化更新时，可以使用事件总线（Event Bus）或者Vuex（状态管理库）。这里以事件总线为例：

1. **事件总线（Event Bus）**：子组件通过`emit`触发一个自定义的事件，传递想要改变的值。父组件监听这个事件，在处理完业务逻辑后调用`dispatch`或`broadcast`来通知所有子组件（如果是全局广播），然后更新其状态。子组件通过`on`监听父组件的状态变化。

// 父组件
Page({
  data: {
    value: '初始值'
  },
  methods: {
    updateValue(newVal) {
      this.value = newVal;
      // 触发事件
      uni.EventCenter.emit('updateValue', this.value);
    }
  }
})

// 子组件
Component({
  props: ['value'],
  methods: {
    handleParentChange() {
      // 当父组件状态变化，处理业务逻辑后
      uni.EventCenter.on('updateValue', newVal => {
        this.setData({ value: newVal });
      });
    }
  }
})

2. **Vuex**：如果应用的状态较多，推荐使用Vuex。子组件通过`actions`触发一个异步操作来更新状态，然后通过`mapActions`在组件内部调用这个动作。父组件不需要直接操作子组件，而是通过改变store里的状态间接影响子组件。

// store.js
export default new Vuex.Store({
  state: {
    value: '初始值'
  },
  mutations: {
    setValue(state, newVal) {
      state.value = newVal;
    }
  },
  actions: {
    updateValue(context, newVal) {
      context.commit('setValue', newVal);
    }
  }
})

// 子组件
Component({
  computed: {
    parentValue() { return this.$store.state.value; }
  },
  methods: {
    async onParentChange() {
      await this.$store.dispatch('updateValue', '新的值');
    }
  }
})