一、父组件使用”:Att“向组件传递值
1、父组件值发生变化,子组件值同时发生变化;不用计算属性进行关联也会发生变化
2、父组件值发生变化,子组件使用到该属性的计算属性同时发生变化
3、子组件修改属性,计算属性同时发生变化‘
4、子组件修改属性,父组件值不会发生变化
注意:props属性不能使用v-model绑定到输入框
二、引入ACT后使用,引用“$Att”进行值绑定
import { syncModel } from "./avm-ui/utils"//引入Act组件下的utils中的syncModel
export default {
name: 'action-sheet',
install() {//添加生命周期函数
syncModel.call(this);//让$绑定属性值生效
}
}
1、子组件使用“Att“获取不到值,需要使用“this.$model.Att”来获取值,注意要判断“this.$model”是否存在;
a、父组件发生改变,子组件内容不会变化
b、父组件发生变化,子组件计算属性也不会发生变化
2、子组件使用“this.$model.Att”方式获取值,当修改值时需要使用“this.$model.Att=”test“”来进行修改
a、子组件修改值后,父组件值立马修改为最新的值
b、子组件修改值后,子组件中“this.$model.Att”获取值的地方不能及时更新,如果子组件多次更新,子组件“this.$model.Att”显示的值时上一次更新的值。
解决方法:
a、如果只是子组件修改值到父组件,可以在子组件中添加一个属性,然后修改this.$model.Att=”test“时同时修改改属性值即可;这样通过子组件中的属性更新,保障子组件内部能更新$model.Att到最新的值。
b、如果涉及到父组件要更新子组件值,子组件更新父组件值,可以在父组件中使用“:Att”形式添加一个同名属性,this.$model.Att负责更新父组件,使用":Att"来保持父组件更新后子组件能够感知到
注意:使用$Att”实现属性绑定的时候,如果绑定的属性有层级,父级对象不能更改,如下
<test $val2="test.val2"></test> 通过$val2绑定了属性test中的val2属性,test不能进行更改,否者不能监听到子组件中变化、
1:如果父组件中通过如下方式将test修改成另一个对象,则子主键this.$model.val2=”test“时不能修改到父组件的值
this.test = this.flag ? {
val1: "val1-123",
val2: "val2-123",
} : {
val1: "val1-789",
val2: "val2-789",
}
2:父组件需要改变值时只能通过如下方式进行更改,这样才能在子组件中通过this.$model.val2=”test“来改变父组件的值
this.test.val2 = this.flag ? "val2-123" : "val2-789"