Vue Material Drawer组件封装后状态同步异常及警告问题求助

嘿，这个问题我之前也碰到过！核心原因就是Vue的单向数据流规则——子组件不能直接修改父组件传过来的props，你用了md-active.sync在props上，相当于让Drawer组件直接修改showSidebar这个prop，这就违反了规则，所以会弹出警告，而且父组件的showSidebar状态根本没更新，导致之后点击按钮时，Vue觉得值没变化，就不会触发侧边栏打开了。

给你两个靠谱的解决方案，选哪个都行：

方案一：本地状态+监听同步 #

在Sidebar组件里维护一个本地状态变量，基于父组件的props初始化，然后监听props和本地状态的变化实现双向同步：

Sidebar组件模板

<md-drawer :md-active="isActive" @md-close="isActive = false">
  <!-- 你的侧边栏内容 -->
</md-drawer>

Sidebar组件逻辑

export default {
  name: 'sidebar',
  props: ['showSidebar'],
  data() {
    return {
      // 用父组件props初始化本地状态
      isActive: this.showSidebar
    }
  },
  watch: {
    // 父组件的showSidebar变化时，同步到本地状态
    showSidebar(newVal) {
      this.isActive = newVal
    },
    // 本地状态变化时，通知父组件更新
    isActive(newVal) {
      this.$emit('update:showSidebar', newVal)
    }
  }
}

然后父组件里把绑定改成.sync语法糖，这样父组件的showSidebar会自动接收子组件的更新：

<Sidebar :showSidebar.sync="showSidebar"></Sidebar>

方案二：计算属性的get/set（更简洁） #

用计算属性的get方法返回props的值，set方法触发事件通知父组件，省去本地data和watch的代码：

Sidebar组件逻辑

export default {
  name: 'sidebar',
  props: ['showSidebar'],
  computed: {
    isActive: {
      get() {
        return this.showSidebar
      },
      set(newVal) {
        this.$emit('update:showSidebar', newVal)
      }
    }
  }
}

Sidebar组件模板

<md-drawer :md-active.sync="isActive">
  <!-- 你的侧边栏内容 -->
</md-drawer>

父组件同样用.sync绑定即可，和方案一完全一致。

这样修改后，点击页面按钮能正常打开侧边栏，点击外部关闭时，子组件会通知父组件更新showSidebar状态，既不会有警告，之后也能正常触发侧边栏的打开/关闭啦！

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