vue中父子传值双向绑定及数据更新问题的示例分析

这篇文章将为大家详细讲解有关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中父子传值双向绑定及数据更新问题的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。