vue 监听不到 data 返回的值

Question

有一个组件export default {  props: {    isShow: {      type: Boolean,      default: false    }  },  data () {    return {      dialogVisible: this.isShow    }  },  watch: {    dialogVisible: function (val, oldVal) {      console.log(val)    }  }}父组件会传递一个值给 isShow，来控制是否显示一个 dialog，我发现当父组件传递一个值给 isShow 的时候可以监听到 isShow 值的变化，但是监听不到 dialogVisible 值的变化。更新一下问题：实际场景是这样的，父组件会传递一个 bool 值给子组件的 isshow 来控制是否显示 dialog，子组件中有一个变量 dialogvisible，实际控制 dialog 打开关闭的是这个 dialogvisible，<el-dialog :visible.sync="dialogVisible">，就像这样，如果用计算属性的话没办法给 dialogvisible 赋值，dialog 关闭的时候会自动把 false 赋值给 dialogvisible，另外当 dialog 关闭的时候我希望能够通知到父组件

Answer 1

因为dialogVisible并没有变化啊，按照你的意思，应该用计算属性

computed: {

    dialogVisible: function () {

      return this.isShow

    }

  }

详情见计算属性和侦听属性

Answer 2

测试了一下，父组件传递isShow给子组件，但是子组件的私有data dialogVisible并没有跟随isShow的变化而变化，所以你这边的watch是无法监听的。

但是可以通过computed属性来获取isShow的变化

    computed:{

      dialogVisible:function () {

        return this.isShow

      }

    }

虽然有点明白题主的意思，代码实现如下你参考下:

  export default {

    name: "mychild",

    props: {

      isShow: {

        type: Boolean,

        default: false

      }

    },

    data() {

      return {

        dialogvisible: false

      }

    },

    watch: {

      isShow: function (newval) {

        this.dialogvisible = newval;

        if (!this.dialogvisible) {

          this.$emit("on-close", '我关闭了')

        }

      }

    }

  }

主要是在子组件中监听isShow这个变量，而不是监听dialogvisible 这个变量，因为你dialogvisible这个变量的数值 其实是isShow赋予的。

父组件

<mychild :isShow="val" @on-close="get"></mychild>

父组件监听$emit的事件。