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: {&nbsp; &nbsp; dialogVisible: function () {&nbsp; &nbsp; &nbsp; return this.isShow&nbsp; &nbsp; }&nbsp; }详情见计算属性和侦听属性

Answer 2

测试了一下，父组件传递isShow给子组件，但是子组件的私有data dialogVisible并没有跟随isShow的变化而变化，所以你这边的watch是无法监听的。但是可以通过computed属性来获取isShow的变化&nbsp; &nbsp; computed:{&nbsp; &nbsp; &nbsp; dialogVisible:function () {&nbsp; &nbsp; &nbsp; &nbsp; return this.isShow&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }虽然有点明白题主的意思，代码实现如下你参考下:&nbsp; export default {&nbsp; &nbsp; name: "mychild",&nbsp; &nbsp; props: {&nbsp; &nbsp; &nbsp; isShow: {&nbsp; &nbsp; &nbsp; &nbsp; type: Boolean,&nbsp; &nbsp; &nbsp; &nbsp; default: false&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; dialogvisible: false&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; watch: {&nbsp; &nbsp; &nbsp; isShow: function (newval) {&nbsp; &nbsp; &nbsp; &nbsp; this.dialogvisible = newval;&nbsp; &nbsp; &nbsp; &nbsp; if (!this.dialogvisible) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit("on-close", '我关闭了')&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }主要是在子组件中监听isShow这个变量，而不是监听dialogvisible 这个变量，因为你dialogvisible这个变量的数值 其实是isShow赋予的。父组件<mychild :isShow="val" @on-close="get"></mychild>父组件监听$emit的事件。