Apicloud 3父组件与子组件属性绑定

一、父组件使用”: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"