vue中的父子傳值雙向綁定及數據修改視圖不更新問題

在進行父子組件傳值時，用到子組件直接控制父組件中的變量值以及在vue中直接更改對象或者數組的值，視圖未發生變化的解決辦法，當時完成項目時，一直未找到緣由，修改了很久。

1.父子組件傳值雙向綁定

• 在傳遞給子組件中的變量上使用.sync修飾符，就可以實現父子傳值的雙向綁定

<!-- 父組件 -->
<template>
  <div class="audioCate">
    <child :show.sync="showModel" @closeModel="handleCloseModel"></child>
  </div>
</template>
<script>
  import child from './child'
  export default{
    components: {
       child,
    }
    data() {
      return {
        showModel: false
      }
    },
    methods: {
      handleCloseModel() {
        this.showModel = false;
      }
    }
  }
</script>

<!-- 子組件 -->
<template>
  <div class="cate" @click="handleClick">
    <div></div>
  </div>
</template>
<script>
  export default{
    props: {
      show: Boolean,
    },
    data() {
      return {
        showModel: false
      }
    },
    methods: {
      handleClick() {
        /* 直接更新父組件中的showModel值 */
        this.$emit('update:show', false);
        /* 或者調用父組件中的方法對showModel進行更改 */
        /* this.$emit('closeModel'); */
      }
    }
  }
</script>

2.修改對象或數組中的鍵，視圖未發生變化

• 使用$set方法進行修改，官方文檔中也有說明

• 當時我是直接對數組中的值進行修改，可是視圖沒有發生變化

<script>
  export default{
    data() {
      return {
        item: {
          title: '222'
        },
        options: [11, 22],
        list: [
          {
            title: '2222'
          }
        ]
      }
    },
    created() {
      /* 對於對象，第一個爲要修改的對象，第二個參數爲對象的鍵，第三個爲要修改的鍵對應的值 */
      this.$set(this.item, 'title', '2200');
      /* 對於對象，第一個爲要修改的數組，第二個參數爲數組索引，第三個爲要修改的索引對應的值 */
      this.$set(this.options, 0, 33);
      /* 對於數組裏包含對象，能夠利用循環對其進行修改 */
      this.list.forEach(item => {
        this.$set(item, '_disableExpand', true);
      });
      /* 對於數組裏包含對象，也能夠利用Object.assign對其進行修改 */
      this.list[0] = Object.assign({}, this.list[0], { num: 10 });
      this.$set(this.list, 0, this.list[0]);
    },
  }
</script>

• 也能夠直接進行修改後對頁面進行強制刷新，使用$forceUpdate()方法

this.options[0] = 100;
this.$forceUpdate();

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期好文推薦：

  • 使用vue開發移動端管理後臺
  • 實現單行及多行文字超出後加省略號
  • node之本地服務器圖片上傳
  • 純css實現瀑布流（multi-column多列及flex佈局）