I have been studying the source code of Vue recently and summarized several methods of transferring data between parent and child components in Vue. 1. props & eventsThe parent component passes props data to the child component, and the child component returns data to the parent component by triggering events. The code is as follows: //Subcomponent <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'], //or props:{name:{type:String,default:''}} methods:{ //You cannot modify props data in child components, you should trigger an event for the parent component to handle changeName(newName){ this.$emit('changeName',newName) } } } </script> //Parent component <template> <div> <child-comp :name="name" @changeName="changeName"></child-comp> </div> </template> <script> import childComp from 'path' export default{ data(){ return {name:'XXX'} }, components:{ childComp }, methods:{ changeName(newName){ this.name = newName; } } } </script> The above is a complete process. The parent component passes data to the child component through props, and the child component triggers the event, which is listened by the parent component and processed accordingly. 2.refThe ref attribute can be defined on a child component or native DOM. If it is on a child component, it points to the child component instance. If it is on the native DOM, it points to the native DOM element (which can be used for element selection, eliminating the trouble of querySelector). The idea of passing data is: get the child component instance through ref in the parent component, then call the child component method and pass the relevant data as parameters. The code is as follows: //Subcomponent <template> <div>{{parentMsg}}</div> </template> <script> export default{ data(){ return { parentMsg:'' } }, methods:{ getMsg(msg){ this.parentMsg = msg; } } } </script> //Parent component <template> <div> <child-comp ref="child"></child-comp> <button @click="sendMsg">SEND MESSAGE</button> </div> </template> <script> import childComp from 'path' export default{ components:{ childComp }, methods:{ sendMsg(){ this.$refs.child.getMsg('Parent Message'); } } } </script> 3. provide & inject are not officially recommended for use in production environmentsProvide means to provide. When a component provides a data through provide, its descendant components can use inject to accept the injection, so that they can use the data passed by the ancestor component. The code is as follows: //child <template> <div>{{appName}}</div> </template> <script> export default{ inject:['appName'] } </script> //root export default{ data(){ return { appName:'Test' } }, provide:['appName'] } 4.vuexVue's officially recommended global state management plug-in. No details. This concludes this article about several methods of passing data from parent components to child components in Vue. For more information about passing data from parent components to child components in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Install MySQL 5.7 on Ubuntu 18.04
>>: Detailed explanation of the pitfalls of MySQL 8.0
Table of contents background 1. The query conditi...
We can view the installation path of mysql throug...
mysql installer community 8.0.16.0 installation g...
Table of contents compose function Array.prototyp...
Preface This article will explain how Vue compone...
Table of contents background Problem Description ...
Table of contents 1. Parent components and child ...
This article introduces how to install Chrome bro...
Preface I believe most people have used MySQL and...
Table of contents Summary of Distributed ID Solut...
Preface: It’s the end of the year, isn’t it time ...
What is an index? Why create an index? Indexes ar...
After Ubuntu 20.04 is installed, there is no root...
The solution to the transparent font problem after...
Table of contents Effect demonstration:Main JS co...