Detailed explanation of Vue component parent-child communication (1)

小云云
Release: 2017-12-26 13:11:49
Original
1730 people have browsed it

This article mainly introduces the detailed explanation of the communication between the parent and the child of the Vue component and the realization of the login window. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Communication between components (parent component --> child component)

Steps:

①Parent component Pass the value when calling the child component


 
Copy after login

②Get the value passed by the parent component in the child component


Vue.component('child-component',{   props:['myValue'],   template:'' })
Copy after login

Code 1:


##

    父传子  

{{msg}}

Copy after login

myValue is the attribute name, which must be the same...use v-bind: or:

props is a property attribute, which is an array

Code 2:



    父子之间通信练习  

{{msg}}

Copy after login

Code 3:



      

Copy after login
To get the data in data, v-bind is required, otherwise it is not used.

Related recommendations:


Introduction to the storage event of the communication method between js pages

Vue.js component communication Detailed analysis of several postures

A brief introduction to the communication methods between React components

The above is the detailed content of Detailed explanation of Vue component parent-child communication (1). For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The 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.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!