在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

有一個組件

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

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

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

回答
編輯回答
墨小羽

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

更新：
我自己寫了一個，你看看；要點在于父組件傳入的屬性參數(shù)是不能在子組件里直接修改的，實際控制dialog顯示隱藏的最終都是父組件修改isShow的值實現(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>

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

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

因為dialogVisible并沒有變化啊，按照你的意思，應(yīng)該用計算屬性

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

詳情見計算屬性和偵聽屬性

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

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

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

雖然有點明白題主的意思，代碼實現(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這個變量，而不是監(jiān)聽dialogvisible 這個變量，因為你dialogvisible這個變量的數(shù)值 其實是isShow賦予的。
父組件

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

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

2017年12月12日 09:14