在进行父子组件传值时，用到子组件直接控制父组件中的变量值以及在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开发移动端管理后台
  • 实现单行及多行文字超出后加省略号
  • node之本地服务器图片上传
  • 纯css实现瀑布流（multi-column多列及flex布局）