Vandf组件通信方式一：数据共享

Vandf组件之间通信方式一：数据共享

Vandf组件之间可以通过数据共享、状态共享、事件等方式实现数据交互，Vandf的数据交互方式是在通过上层数据传递来实现共享，从Input组件输入，点击框外触发change事件，然后自动更新TextArea组件的数据，反之亦然。直接看例子。文档参见 vandf - npm (npmjs.com)

1.定义Input组件

class Input extends Van {
    constructor(id){
        super(id)
        this.tag('input')//input
            .view(InputView)//绑定组件的视图模型
    }
}

2.定义TextArea组件

class TextArea extends Van {
    constructor(id){
        super(id)
        this.tag('textarea')//textarea
            .view(InputView)//绑定组件的视图模型，由于组件行为一致，重用视图模型。
    }
}

3.定义视图模型

class InputView {
    create(node,model){
        node.on("change", e=>{
            model.setValue(node.index, node.text())//更新模型数据
            node.parent().update()//要更新两个子组件，所以要刷新父组件
        }, true)//传入true，注册原生事件
    }
    render(node,model){
        node.text(d=>d)
    }
}

4.定义用户数据模型

class UserModel {
    supply(data){
        this.data = data.value;//接收上层组件传递的数据，并提取数据。
        return this.data;
    }
​
    getValue(index){
        return this.data[index]
    }
​
    setValue(index, value){
        this.data[index] = value
    }
}

5.使用组件构建应用

import { Van } from "vandf"
let app = Van.new('app').supply({value:["Happly"]})
Input.new('input', app.id).model(UserModel)//注册模型
TextArea.new('textarea', app.id).model(UserModel)//因两个行为一致，重用用户模型
app.attach(document.querySelector("#app"))

6.总结

从这个例子可以得出以下几个结论：

• Vandf框架实现了数据的层层传递，及其容易实现子组件之间的数据共享。
• Vandf模型把组件定义，视图模型定义和用户模型定义进行解构，提高了这三者的可重用性。