How to use v-model in vue to achieve parent-child component communication-JS Tutorial-php.cn

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 , ,&lt ;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 login If you want to execute console.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 time Object.defineProperty( ) comes in handy. The code is as follows:

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-model

There 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 login The 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 login Copy after login In other words,

Copy after login can also be written as

Copy after login Copy after login v-model in the component The use of

is 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:

import testModel from 'src/components/testModel' export default { data(){ return{ haorooms: "haorooms" } }, components: { testModel, } } Copy after login The child component code is as follows:

export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', event: 'balabala' } } Copy after login We 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-model

When creating common components like check boxes or radio buttons, v-model is not easy to use.

Copy after login We can solve it in the following way:

Copy after login The parent component can be written as follows:

Copy after login Child component:

@change="$emit('balabala', $event.target.checked)" :checked="value" /> export default { data(){ return{ } }, props: ['checked'], //这里就不用 value 了，而是 checked model: { prop: 'checked', event: 'balabala' }, } Copy after login The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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