Solves the problem of Bidirectional binding between the Vue2.x parent component and the child component, and binds the vue2.x component

Solves the problem of Bidirectional binding between the Vue2.x parent component and the child component, and binds the vue2.x component

Recently, I have been studying how to write a Vue2.x-based UI component for myself to Improve the efficiency by a little BIG. I encountered a problem when creating components containing input: I don't know how to bind the input and caller (parent component) data in the child component in two ways. I thought about using Vuex, but I watched other excellent UI frameworks, I found that using Vuex would cause trouble to other users, so I decided to find a solution. After referring to several articles by the experts, I finally found it.

We will post the solution here, hoping to help our colleagues who are new to the Vue framework.

Code logic of child components

<Template> <div class = "ne-ept"> <input type = "text" v-model = "currentValue"> </div> </template> <style lang = "less" scoped> @ import ".. /.. /assets/styles/form. less "; </style> <script> export default {name: 'neipt', props: {// receives a value passed by the parent component: {type: string, default: function () {return ''}}, computed: {currentValue: {// get: function () {return this. value; // assign the value in props to currentValue}, set: function (val) {this. $ emit ('input', val); // trigger the parent component through $ emit }}</script>

Code logic of the parent component

<Template> <div id = "button-index"> <ne-EPT placeholder = "name" v-model = "test"> </ne-EPT> </div> </template> <style> </style> <script> import NeIpt from '. /neip' export default {name: 'form-Index', data () {return {test: ''}}, components: {neip}}</script>

When you modify the currentValue of the child component, you can use $ emit to trigger the input event and pass the value to the caller's v-model to implement bidirectional binding.

Summary

The above section describes how to solve the bidirectional binding problem between the Vue2.x parent component and the child component. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!