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>