Shulou(Shulou.com)06/01 Report--

Xiaobian to share with you how vue to achieve two-way binding of data, I hope you have something to gain after reading this article, let's discuss it together!

Realize two-way binding of data to facilitate data maintenance

There are many scenarios where the parent component needs to pass data to the child component, and when the child component triggers data updates, it immediately feeds back to the parent component, the parent component data updates, the unidirectional data flow to the child component, and finally the child component updates. Normally, state is updated using props + $emit, but this approach is a bit clumsy and difficult to maintain, so you can improve the maintainability of your code by implementing "two-way binding" of data. This can be done in the following ways:

Using.sync to implement Prop's "two-way binding"

Add the.sync modifier to v-bind prop and this.$to assign new values emit('update:propName', newValue)

If you want to update the title value in the above code, you only need this.$ emit ('update: title','new title') to complete the data update.

Using the model option

Model is a new option in 2.2.0+. By default, v-model on a component uses Prop named value and event named input, while model option can specify Prop name and event name to implement v-model. The advantage is that while implementing v-model, it also avoids conflict between Prop and event name.

v-model for custom components

checked {{checked}}export default { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, methods: { handleClick() { this.$ emit('change', ! this.checked); } }

In the above code, you only need to add prop and event to the model option to implement v-model. In Vue + TS project, vue-property-decorator provides Model decorator, which needs to be written as follows:

@Model('change', { type: Boolean }) readonly checked!: booleanhandleClick() { this.$ emit('change', ! this.checked);}

We only need to use.sync and model to achieve "two-way binding" of data, so writing code can reduce our code to some extent, and the code becomes more elegant and maintainable.

After reading this article, I believe you have a certain understanding of "how vue realizes two-way binding of data". If you want to know more about relevant knowledge, please pay attention to the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.