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.定义TextAre a组件

```javascript
class TextArea extends Van {
constructor(id) {
super(id)
this.tag('texta rea')//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,mod el){
node.on("change ", e=>{
model.setValue( node.index, node.text())//Update model data
node.parent().u pdate()//To update two subcomponents, refresh the parent component
}, true)//Pass in true and register native events
}
render(node,mod el){
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('inpu t', app.id).model(U serModel)//Registration Model
TextArea.new('t extarea', app.id).model(U serModel)//Reuse user model due to two consistent behaviors
app.attach(docu ment.querySelec tor("#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.