在进行父子组件传值时，用到子组件直接控制父组件中的变量值以及在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() { this.$emit('update:show', false); } } }</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); }); 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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。