Vandf component communication method one: data sharing

[abbasky]

### Vandf component communication method one: data sharing

​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method is achieved through upper level data transmission, input from the Input component, click outside the box to trigger the change event, and then automatically update the data of the TextArea component, and vice versa. Just look at the example. Document reference [vandf - npm (npmjs.com)](https://www.npmjs.com/package/vandf)

#### 1.Defining Input Components

```javascript
class Input extends Van {
constructor(id){
super(id)
this.tag('input')//input
.view(InputView)//View model for binding components
}
}
```

### 2.定义TextArea组件

```javascript
class TextArea extends Van {
constructor(id){
super(id)
this.tag('textarea')//textarea
.view(InputView)//Bind the view model of components, and reuse the view model due to consistent component behavior.
}
}
```

### 3.Define View Model

```javascript
class InputView {
create(node,model){
node.on("change", e=>{
model.setValue(node.index, node.text())//Update model data
node.parent().update()//To update two subcomponents, refresh the parent component
}, true)//Pass in true and register native events
}
render(node,model){
node.text(d=>d)
}
}
```

### 4.Define user data model

```javascript
class UserModel {
supply(data){
this.data = data.value;//Receive data transmitted by upper level components and extract the data.
return this.data;
}

getValue(index){
return this.data[index]
}

setValue(index, value){
this.data[index] = value
}
}
```

### 5.Building applications using components

```javascript
import { Van } from "vandf"
let app = Van.new('app').supply({value:["Happly"]})//provide data
Input.new('input', app.id).model(UserModel)//Registration Model
TextArea.new('textarea', app.id).model(UserModel)//Reuse user model due to two consistent behaviors
app.attach(document.querySelector("#app"))
```

#### 6.Summarize

​ From this example, the following conclusions can be drawn:
-The Vandf framework enables layer by layer transmission of data, making it extremely easy to achieve data sharing between sub components.
-The Vandf model deconstructs component definitions, view model definitions, and user model definitions, improving their reusability.