Home> Web Front-end> Vue.js> body text

How to pass vue.js components from parent to child

coldplay.xixi
Release: 2020-11-17 15:29:34
Original
2035 people have browsed it

Vue.js component implements parent-to-child method: first, the child component creates a property in props to receive the value passed by the parent component; then registers the child component in the parent component and adds the child component label Add the attribute created in the subcomponent props; finally assign the value that needs to be passed to the subcomponent to the attribute.

How to pass vue.js components from parent to child

[Related article recommendations:vue.js]

vue.js component implementation Method of passing from parent to child:

1. Create a child component and create a new Child.vue in the src/components/ folder

2. Create props in Child.vue. Then create an attribute named message

How to pass vue.js components from parent to child

3. Register the Child component in App.vue, add the child tag to the template, add the message attribute to the tag and assign a value

How to pass vue.js components from parent to child

4. Save the modified file and view it in the browser

How to pass vue.js components from parent to child

5. We can still modify the value of message -bind dynamic binding

How to pass vue.js components from parent to child

In the browser at this time

How to pass vue.js components from parent to child

Related free learning recommendations:javascript(Video)

The above is the detailed content of How to pass vue.js components from parent to child. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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!