Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

1. demo

2. 错误写法

解释： 开始点击的时候不会报错，当点击遮罩层时，子组件会改变 show 的值，官网不建议修改 prop 值，所以报错

// 父组件

<nav-bar title="首页" leftIcon="user-circle-o" rightIcon="scan"  @userInfo="onUserInfo" />

<user-info :show="popupShow" />

data() {
  return {
    popupShow: false
  }
},
methods: {
  onUserInfo() {
    this.popupShow = true
  }
}

// 子组件
<van-popup v-model="show" position="left" class="popup" />

export default {
  name: 'UserInfo',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  }
}

3. 推荐写法

解释： 子组件在 data 中定义 show，接受父组件传递过来的 popupShow ，然后 watch 判断变化并赋值 给 show，这样就不是修改 prop 而是修改了 data 中的数据；@click-overlay 当用户点击遮罩层时，通知父组件改变 popupShow 的值

// 父组件

<nav-bar title="首页" leftIcon="user-circle-o" rightIcon="scan"  @userInfo="onUserInfo" />

 <user-info :popupShow="popupShow" @close="onClose" />

data() {
  return {
    popupShow: false
  }
},
methods: {
  onUserInfo() {
    this.popupShow = true
  },
 onClose() {
     this.popupShow = false
   }
}

// 子组件
<van-popup v-model="show" position="left" class="popup" @click-overlay="close" />

export default {
  props: {
    popupShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    popupShow(newVal, oldVal) {
      this.show = newVal
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}

4. 在子组件中改变 prop 中的值会报错；在父组件改变子组件 prop 中的值不会报错