How to use v-model in vue to achieve parent-child component communication

vue.js is a library for building data-driven web interfaces. The goal of Vue.js is to enable responsive data binding and composed view components with the simplest possible API. The following article mainly introduces relevant information about the communication implementation of v-model parent and child components in the vue project. Friends in need can refer to it.

Preface

In our vue project, we often have such a requirement. The parent component binds v-model, and the sub-component input changes the parent The value bound to component v-model. Many friends are not very clear about this operation, which requires a deeper understanding of v-model. Let’s talk about v-model today.

Vue’s two-way data binding

The v-model command can only be used in,,< ;textarea> On these form elements, the so-called two-way binding means that the data in our vue instance in js is consistent with the content on the rendered dom element. No matter which one of the two is changed, the other party will change accordingly. Updated with the same data.This question will be mentioned in many front-end interviews. The interviewer asked you, what is the principle of two-way data binding in Vue? Of course, this is also a familiar question. You can find the answer everywhere by searching on Baidu.Generally, you will find that Object.defineProperty() is used to monitor data get and set to achieve data hijacking.If you don’t know much about Object.defineProperty(), you can click on the link above to take a look at its syntax!Give a simple example:var blog = { name: 'haorooms博客' }; console.log(blog.name); // haorooms博客Copy after loginIf you want to executeconsole.log(blog.name)at the same time, directly give haorooms How to add a book title to a blog? In other words, what is the attribute value of the monitoring object blog? At this timeObject.defineProperty( )comes in handy. The code is as follows:var blog= {} var name = ''; Object.defineProperty(blog, 'name', { set: function (value) { name = value; console.log('欢迎来到' + value); }, get: function () { return '《' + name + '》' } }) blog.name = 'haorooms博客'; // 欢迎来到haorooms博客 console.log(blog.name); // 《haorooms博客》Copy after loginExecute the above code and you can see the effect!Regarding Vue’s two-way data binding, how is it implemented? There are also many implementation codes on the Internet, so I won’t go into too much detail here!Usage of v-modelThere is a small gap in the above. I have said so much, but it is actually to illustrate that Vue is a single data flow. , v-model is just syntactic sugar. Copy after loginThe first line of code is actually just syntactic sugar for the second line. Then the second line of code can be abbreviated like this:Copy after loginCopy after loginIn other words,Copy after logincan also be written asCopy after loginCopy after loginv-model in the component The use ofis back to our original question? How does v-model communicate between parent and child components in vue? How to use it in components? If you understand my example above, then we can easily use v-model in components.The parent component code is as follows: Copy after loginThe child component code is as follows: Copy after loginWe can use the above code to modify the value of the parent component v-model binding by the child component!Implementation screenshots are as follows:Disadvantages and solutions of v-modelWhen creating common components like check boxes or radio buttons, v-model is not easy to use.Copy after loginWe can solve it in the following way:Copy after loginThe parent component can be written as follows:Copy after loginChild component: @change="$emit('balabala', $event.target.checked)" :checked="value" /> export default { data(){ return{ } }, props: ['checked'], //这里就不用 value 了，而是 checked model: { prop: 'checked', event: 'balabala' }, }Copy after loginThe above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.Related articles:How to implement a custom event mechanism using Javascript##Detailed interpretation of the map data structure in javascriptHow to develop a two-dimensional weekly view calendar using JavascriptThe above is the detailed content of How to use v-model in vue to achieve parent-child component communication. For more information, please follow other related articles on the PHP Chinese website!Related labels：modelvuevue2Parent-child component communicationsource：php.cnPrevious article：What are the methods for component communication in react?Next article：How to deploy Angular project to nginxStatement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cnLatest Articles by AuthorProblems with pop-up windows not being centered in weebox2018-06-23 18:19:43How to use excel-like components in vue+canvas2018-06-23 18:17:39How to call class in JavaScript2018-06-23 18:11:37How to implement pull-up refresh function using Vue framework2018-06-23 18:10:14How to implement image cropping component using Vue mobile terminal2018-06-23 18:06:43About WeChat mini program templates and modular usage (detailed tutorial)2018-06-23 18:04:28How to implement pull-up loading function in vue22018-06-23 18:02:45How to implement three-level linkage using Vue22018-06-23 18:00:45How to implement data request display loading graph in vue22018-06-23 17:58:23How to set up and monitor using element full screen2018-06-23 17:56:41Latest IssuesVue 3 and Vuetify 3 access SCSS/SASS variables in componentsI want to use predefined variables in my Vue3 component.