详解vue中的父子传值双向绑定及数据更新问题

<!-- 父组件 -->
<template>
 <div class="audioCate">
 <child :show.sync="showModel" @closeModel="handleCloseModel"></child>
 </div>
</template>
<script>
 import child from './child'
 export default{
 ponents: {
  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>

<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>

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