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
This article shares the specific code of JS+Canva...
Due to encoding reasons, garbled characters will ...
The following HTML tags basically include all exis...
Preface Only Innodb and MyISAM storage engines ca...
This article uses examples to describe how to bac...
The world-famous virtual machine software VMware-...
1. Introduction I wrote an article before: The pr...
Linux system version: CentOS7.4 MySQL version: 5....
Table of contents Routing Manager background gett...
Preface Share two methods to monitor whether an e...
Docker provides a way to automatically deploy sof...
1. First install the pagoda Installation requirem...
Preface When writing front-end pages, we often us...
This article shares the specific code of the WeCh...
Table of contents need: Main points: According to...