Vue中如何实现组件之间的状态同步？

<!-- 父组件 --><template>  <div>    <h2>父组件</h2>    <p>父组件的状态：{{ parentState }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    <child-component :childState="parentState" @change="handleChange"></child-component>  </div></template><script>import ChildComponent from './ChildComponent.vue'export default {  components: {    ChildComponent  },  data() {    return {      parentState: '初始状态'    }  },  methods: {    handleChange(newChildState) {      this.parentState = newChildState    }  }}</script>

<!-- 子组件 --><template>  <div>    <h3>子组件</h3>    <p>子组件的状态：{{ childState }}</p>    <input v-model="childState" @input="handleInputChange">  </div></template><script>export default {  props: {    childState: {      type: String,      default: ''    }  },  methods: {    handleInputChange(event) {      this.$emit('change', event.target.value)    }  }}</script>

<!-- 使用Vuex的组件 --><template>  <div>    <h2>使用Vuex的组件</h2>    <p>共享的状态：{{ sharedState }}</p>    <input v-model="sharedState" @input="handleChange">  </div></template><script>import { mapState, mapMutations } from 'vuex'export default {  computed: {    ...mapState(['sharedState'])  },  methods: {    ...mapMutations(['updateSharedState']),    handleChange(event) {      this.updateSharedState(event.target.value)    }  }}</script>

// 在main.js文件中初始化Vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    sharedState: '初始状态'  },  mutations: {    updateSharedState(state, payload) {      state.sharedState = payload    }  }})new Vue({  el: '#app',  store,  // ...})

// 创建事件总线实例const EventBus = new Vue()// 在组件中触发事件EventBus.$emit('change', newValue)// 在组件中监听事件EventBus.$on('change', newValue => {  // 处理新的值})