vue实现prop双向绑定

众所周知vue是单向数据流，所以一般情况下是不能直接修改父组件通过prop传递给子组件的值。如果强行修改那么下面这个警告信息你一定不会陌生

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

但是实际开发中我们常常会遇到需要对prop进行双向绑定的情况，最常见的应用场景就是dialog框。我们需要在点击关闭按钮的时候改变父组件传过来的控制dialog显示或隐藏的prop值

解决办法：使用.sync修饰符 文档参考

举个例子：

父组件：

<father :isShow.sync = 'isShow'></father>
复制代码

实际上面的:isShow.sync是:update:isShow的缩写

子组件：

<template>
  <div class="child" v-if="isShow">
    <div>这是子组件</div>
    <div class="closeBtn" @click = "close">这是关闭按钮</div>
  <div>
</template>
<script>
export default {
  props: ['isShow'],
  methods: {
      close(){
         this.$emit("update:isShow", false);
      }
  }
}
</script>
复制代码

通过this.$emit("update:isShow", false);将prop的新值传递给父组件从而实现了一个简单的prop的双向绑定

除了通过这种方式外还可以在data里声明一个新的变量来存储prop并通过watch来监听prop的改变再通过计算属性的方式来动态改变prop的值。

转载于:https://juejin.im/post/5c413a5bf265da613572d4e6