详细说明vue中父子价值传递和数据更新的双向绑定

将值从父组件传递到子组件时，使用子组件直接控制父组件中的变量值，并在vue中直接更改对象或数组的值，解决方案是视图没有更改。当时工程完工，一直没有找到原因，修改了很久。

1.父子组件值传递的双向绑定

通过使用。sync修饰符上的变量传递给子组件，可以实现父组件和子组件之间的双向绑定

！-父组件-模板div class=' audio cate ' child : show . sync=' show model ' @ closemodel=' handlecolossemodel '/child/div/template script import child from '。/child ' export default { components 3360 { child，} data(){ return { show model : false } }，methods : { handleCloseModel(){ this . show model=false；} } }/脚本！-子组件-模板div class=' cate ' @ click=' handleclick ' div/div/模板脚本导出默认值{props: {show: boolean，}，Data(){ return { showModel : false } }，methods: {handleclick () {/*直接更新父组件中的show model值*/this。$ emit ('update3360 show '，false)；/*或者调用父组件中的方法来更改showModel *//* this。$ emit(' closeModel ')；*/}} }/script2。修改对象或数组中的键，视图没有改变

使用$set方法对其进行修改，这在官方文档中也有描述

当时，我直接修改了数组中的值，但是视图没有改变

脚本导出默认值{ data(){ return { item : { title : ' 222 ' }，options: [11，22]，list :[{ title : ' 2222 ' } } } }，Created() {/*对于对象，第一个参数是要修改的对象，第二个参数是对象的键，第三个参数是要修改的键对应的值*/this。$ set(这个。项目，‘标题’，‘2200’)；/*对于对象，第一个是要修改的数组，第二个参数是数组索引，第三个是要修改的索引对应的值*/this。$set(this.options，0，33)；/*对于数组中包含的对象，可以通过循环*/this进行修改。名单。foreach (item={this。$ set (item，' _ disableexpand '，true)；});/*对于数组中包含的对象，也可以使用object . assign */this.list [0]=object . assign({ }，this . list[0]，{num336010})进行修改；这个。$set(this.list，0，this . list[0])；}、}/script也可以使用$forceUpdate()方法直接修改以强制刷新页面

this . options[0]=100；这个。$ force update()；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。