vue的父组件向子组件传递属性，属性不能修改的问题

父组件：

子组件:

// ...
export default {
  props: {
    isVisible: Boolean
  },
  // ...
  methods: {    
    handleOk (e) {
      this.isVisible = false
      // ...
    }
  }
}

结果浏览器报错: 

原因分析: vue父组件向子组件通过props传值时，在子组件props接受到的属性值不能被改变

解决方法：我们可以通过watch来监听props的属性值，然后赋值给data里面的属性，标签属性就可以绑定data里面的属性值

// ...
export default {
  props: {
    isVisible: Boolean
  },
  // ...
  data () {
    return {
      visible: false
    }
  },
  watch: {
    isVisible: function (value) {
      this.visible = value        
    }
  },
  methods: {    
    handleOk (e) {
      this.isVisible = false
      // ...
    }
  }
}