Vue面试题解析：组件通信与数据绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/Xiaoxiao_Zheng/article/details/99631548

本文探讨了Vue面试中常见的组件通信方式，包括父-子组件的props和$emit/v-on，全局状态管理Vuex，以及兄弟组件间通信的事件总线方法。此外，还涉及了MVVM模式、computed与watch的区别，以及Vue的双向数据绑定原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，vue组件通信

（1）父子组件之间的通信

父-子：子组件中props参数，父组件中引入子组件，在子组件上面绑定所需的值

eg:

子组件中

父组件中

子-父：$emit+v-on方法，子组件中，绑定方法a,通过$emit触发父组件中的方法，顺便传参到父组件

eg:

子组件中、

showSearchModal方法就是在父组件中定义的

父组件中

（2）vuex，全局数据管理库进行通信

将状态保存在仓库中，通过mutation中定义的方法，commit来改变状态

eg:

改变状态

this.$store.commit("isQueryListFun", true);

获取状态

监听状态变化

（3）兄弟之间通信

1) 首先注册bus到vue原型上面

new Vue({
    router,
    i18n,
    store,
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.bus = this;
    },
}).$mount('#app');

2）兄弟A+兄弟B

兄弟A传值：

this.bus.$emit("on-update-storage", {
                            storageQueryInfo: storageQueryInfo || [],
                            queryId: res.data.queryId,
                            replyDetailId: replyInfoList.length > 0 ? replyInfoList[replyInfoList.length - 1].queryDetailId : null
                        });

兄弟B接收：

  created() {
    this.bus.$on("on-update-storage", (data) => {
      this.formItem.queryStorageList = data.storageQueryInfo;
      this.queryId = data.queryId;
      this.replyDetailId = data.replyDetailId;
    }),
    this.bus.$on("on-update-storage-content", () => {
      this.formItem.queryContent = "";
    })
  },
  beforeDestroy() {
    this.bus.$off("on-update-storage");
    this.bus.$off("on-update-storage-content")
  }

2，mvvm

3、computed和watch的区别

（1）

（2）watch监听数据变化，一般在某个数据变化时做一些暑期，使用watch

4. vue的双向数据绑定

（1）Object.defineProperty劫持对象的访问器，在属性发生变化是，及时获取变化，然后响应

（2）