鍍金池/ 問答/HTML/ vue 監(jiān)聽不到 data 返回的值

vue 監(jiān)聽不到 data 返回的值

有一個(gè)組件

export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialogVisible: this.isShow
    }
  },
  watch: {
    dialogVisible: function (val, oldVal) {
      console.log(val)
    }
  }
}

父組件會(huì)傳遞一個(gè)值給 isShow，來(lái)控制是否顯示一個(gè) dialog，我發(fā)現(xiàn)當(dāng)父組件傳遞一個(gè)值給 isShow 的時(shí)候可以監(jiān)聽到 isShow 值的變化，但是監(jiān)聽不到 dialogVisible 值的變化。

更新一下問題：
實(shí)際場(chǎng)景是這樣的，父組件會(huì)傳遞一個(gè) bool 值給子組件的 isshow 來(lái)控制是否顯示 dialog，子組件中有一個(gè)變量 dialogvisible，實(shí)際控制 dialog 打開關(guān)閉的是這個(gè) dialogvisible，<el-dialog :visible.sync="dialogVisible">，就像這樣，如果用計(jì)算屬性的話沒辦法給 dialogvisible 賦值，dialog 關(guān)閉的時(shí)候會(huì)自動(dòng)把 false 賦值給 dialogvisible，另外當(dāng) dialog 關(guān)閉的時(shí)候我希望能夠通知到父組件

回答
編輯回答
墨小羽

你這里的dialogVisible只是用傳入的參數(shù)初始化了，并不會(huì)根據(jù)傳入的參數(shù)而變化，畢竟它不是計(jì)算屬性。。
參考：https://vuejs.org/v2/guide/co...

更新：
我自己寫了一個(gè)，你看看；要點(diǎn)在于父組件傳入的屬性參數(shù)是不能在子組件里直接修改的，實(shí)際控制dialog顯示隱藏的最終都是父組件修改isShow的值實(shí)現(xiàn)的，子組件只是觸發(fā)自定義事件：

<body>
    <div id="father">
        <button @click="toggleDialog">toggle dialog</button><br>
        <el-dialog v-show="isShow" :dialogVisible="isShow" @on-close="closeDialog">
        </el-dialog>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script type="text/javascript">
        Vue.component('el-dialog',{
            template: '<p><button @click="close">close dialog</button> <slot></slot></p>',
            props: {
                dialogVisible: {
                    type: Boolean,
                    default: false
                }
            },
            methods: {
                close: function(){
                    this.$emit('on-close');
                }
            }
        });

        new Vue({
            el: '#father',
            data: {
                isShow: false
            },
            methods: {
                toggleDialog: function(){
                    this.isShow = !this.isShow;
                },
                closeDialog: function(){
                    this.isShow = false;
                }
            }
        })
    </script>
</body>

建議在你提問表述不清楚的時(shí)候也做一個(gè)能表達(dá)你問題的最小系統(tǒng)吧

2018年3月27日 19:37
編輯回答
孤毒

因?yàn)閐ialogVisible并沒有變化啊，按照你的意思，應(yīng)該用計(jì)算屬性

computed: {
    dialogVisible: function () {
      return this.isShow
    }
  }

詳情見計(jì)算屬性和偵聽屬性

2017年3月26日 21:31
編輯回答
墨小白

測(cè)試了一下，父組件傳遞isShow給子組件，但是子組件的私有data dialogVisible并沒有跟隨isShow的變化而變化，所以你這邊的watch是無(wú)法監(jiān)聽的。
但是可以通過computed屬性來(lái)獲取isShow的變化

    computed:{
      dialogVisible:function () {
        return this.isShow
      }
    }

雖然有點(diǎn)明白題主的意思，代碼實(shí)現(xiàn)如下你參考下:

  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", '我關(guān)閉了')
        }

      }
    }
  }

主要是在子組件中監(jiān)聽isShow這個(gè)變量，而不是監(jiān)聽dialogvisible 這個(gè)變量，因?yàn)槟鉪ialogvisible這個(gè)變量的數(shù)值 其實(shí)是isShow賦予的。
父組件

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

父組件監(jiān)聽$emit的事件。

2017年12月12日 09:14