elementui .sync
时间: 2023-09-02 21:09:04 浏览: 52
The .sync modifier in Element UI is used to create two-way binding between a parent and child component in Vue.js. It allows the child component to update the value of a prop passed down from the parent component and also emit an event back to the parent component to update the same prop.
Here's an example of using .sync in Element UI:
Parent component:
```
<template>
<div>
<el-input v-model="message"></el-input>
<child-component :message.sync="message"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
}
}
}
</script>
```
Child component:
```
<template>
<div>
<el-button @click="updateMessage">Update Message</el-button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ''
}
},
methods: {
updateMessage() {
this.$emit('update:message', 'New message value')
}
}
}
</script>
```
In this example, the parent component passes down its "message" data property to the child component as a prop with the .sync modifier. The child component has a button that, when clicked, emits an "update:message" event with a new value. This event is caught by the parent component and updates the "message" data property with the new value, which is then passed down to the child component again. This creates a two-way binding between the parent and child components.