vue中父子傳值雙向綁定及數(shù)據(jù)更新問題的示例分析

這篇文章將為大家詳細講解有關(guān)vue中父子傳值雙向綁定及數(shù)據(jù)更新問題的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在進行父子組件傳值時，用到子組件直接控制父組件中的變量值以及在vue中直接更改對象或者數(shù)組的值，視圖未發(fā)生變化的解決辦法，當(dāng)時完成項目時，一直未找到原因，修改了好久。

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

在傳遞給子組件中的變量上使用.sync修飾符，就能夠?qū)崿F(xiàn)父子傳值的雙向綁定

<!-- 父組件 -->
<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);
  /* 或者調(diào)用父組件中的方法對showModel進行更改 */
  /* this.$emit('closeModel'); */
  }
 }
 }
</script>

2.修改對象或數(shù)組中的鍵，視圖未發(fā)生變化

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

當(dāng)時我是直接對數(shù)組中的值進行修改，但是視圖沒有發(fā)生變化

<script>
 export default{
 data() {
  return {
  item: {
   title: '222'
  },
  options: [11, 22],
  list: [
   {
   title: '2222'
   }
  ]
  }
 },
 created() {
  /* 對于對象，第一個為要修改的對象，第二個參數(shù)為對象的鍵，第三個為要修改的鍵對應(yīng)的值 */
  this.$set(this.item, 'title', '2200');
  /* 對于對象，第一個為要修改的數(shù)組，第二個參數(shù)為數(shù)組索引，第三個為要修改的索引對應(yīng)的值 */
  this.$set(this.options, 0, 33);
  /* 對于數(shù)組里包含對象，可以利用循環(huán)對其進行修改 */
  this.list.forEach(item => {
  this.$set(item, '_disableExpand', true);
  });
  /* 對于數(shù)組里包含對象，也可以利用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();

關(guān)于“vue中父子傳值雙向綁定及數(shù)據(jù)更新問題的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。