473,225 Members | 1,344 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,225 developers and data experts.

Vandf component communication method one: data sharing

### 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.
Jan 20 '24 #1
0 14050

Sign in to post your reply or Sign up for a free account.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.