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

<!-- 父组件 --><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>

<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();