1, use props to implement the parent component to pass data to the child component

To pass data to a child component in the parent component, and then to receive data in the child component using props, you can pass data to the parent component -> child component

The parent component:

<div> <Student name=' sex ':age='18'/> <! This improves code reuse, even if the data is different, You can specify data dynamically --> <Student name=' zhang 'sex=' male' :age='19'/> </div> </template> <script> // import Student from School './components/Student.vue' export default { name:"App", components:{ Student }, } </script>Copy the code

Child components

<div class="school"> <h1>{{msg}}</h1> <h2>{{Name}}</h2> <h2>{{sex}}</h2> <h2>{{myAge+1}}</h2> <button @click='updataAge' </button> </div> </template> <script> export default {name:"Student", Data () {return {MSG :' Welcome! ', myAge:this.age } }, methods:{ updataAge(){ this.myAge++ } }, // props:['Name','age','sex'] // props:{// Name :'String', // age:'Number', // sex:'String' //} // props:{//name :{// type:String,// Type of name // required:true//name is required //}, / / age: {/ / type: Number, / / default: 99 / / default / /}, / / sex: {/ / type: String, // required:true // } // } } </script> <style> .school{ background-color: gray; } </style>Copy the code

As you can see from the above, props can accept several forms. They can simply declare the props to accept, or they can accept data while limiting the type, specifying default values, and limiting the necessity

2, use props to implement the child component to pass data to the parent component

Pass a function to a child in the parent component, and the function’s callback is in the parent component; Define an event in a child component that triggers a function passed from the parent component and passes data to the function at the same time, so that the parent component can call the data parent component:

< div class = "app" > < h1 > {{MSG}}, student's name is: {{studentName}} < / h1 > <! Props for passing function types from parent to child components <School :getSchoolName='getSchoolName'/> </div> </template> import School from './components/ school.vue ' Export default {name:"App", components:{School}, data(){return{MSG :' Hello! ', studentName:'}}, methods:{getSchoolName(name){console.log('App received schoolname :',name)}},Copy the code

Sub-component (School) component:

< div class = "school" > < h2 > school name: {{schoolName}} < / h2 > < h2 > school address: {{adress}} < / h2 > < button @click="sendSchoolName" </button> </div> </template> <script> export default {name:"School", props:['getSchoolName'], data() { return { schoolName:'shangguigu ', adress:'beijing' } }, methods:{ sendSchoolName(){ this.getSchoolName(this.schoolName) } } } </script> <style> .school{ background-color:skyblue; padding: 5px; margin-top: 30px; } </style>Copy the code

3, by binding custom events to realize the child component to the parent component to pass data

The parent component calls a child component that is bound to a custom event. This event refers to a function whose callback is in the parent component. Define an event in a child component that fires a custom event bound to the child, passing in data along with the event so that the parent component’s callback can reach the data. The parent component:

< div class = "app" > < h1 > {{MSG}}, student's name is: {{studentName}} < / h1 > <! - by binding the custom event (the first one: use the v - on or @) - > < Student v - on: hah = 'demo' @ demo = "m1" / > <! -- by binding custom events (second: using ref) --> <! -- <Student ref=" Student "/> --> </div> </template> <script> import School from './components/School.vue' export default { name:"App", components:{ Student, School }, Data (){return{MSG :' Hello! ', studentName:'}}, methods:{getSchoolName(name){console.log('App received school name: ',name)}, demo(name){console.log(' data transfer ',name) this.studentName=name},}, / / it can be more flexible / / / / mounted () {/ / setTimeout (() = > {/ / this. $refs. Student. $on (' hah, enclosing the demo) / /}, 3000) / /}} </script> <style lang="css"> .app{ background-color: gray; padding: 5px; } </style>Copy the code

Subcomponent (Student) Component:

<div class="student"> <h2> student name :{{name}}</h2> </h2> < button@click ="unbind"> </ button@click ="unbind"> </button> </div> </template> <script> export default {name:"Student", Data () {return {name:' zhang ', sex:' male '}}, Methods :{sendStudentName(){// trigger hah event this.$emit('hah',this.name)}, Unbind (){this.$off('hah')}}} </script> <style>. padding: 5px; } </style>Copy the code

There are two ways to write a custom event. One way is to directly define a custom event with v-ON or @ in the child of the call from the parent component. The second way is to mark the subcomponent with ref, and then take the subcomponent out with ref and then take the subcomponent out with ref and then define the custom event with ON (‘ Custom event name, custom event callback ‘).

4. Use global event bus to realize communication between components

You need to create an event bus that has the following characteristics

1. Accessible to all components: This can be achieved by defining it in the Vue prototype (because it is built into Vue: Vuecomponent.prototype.__proto__ refers to vuue. Prototype, so that Vue instances and VM instances can call Vue prototype objects via the prototype chainCopy the code

In order to send information from Student to School, you can use ￥on(‘ XXX ‘,callback) to listen for a XXX event from School, and emit(‘ XXX ‘,data) from Student via ￥on(‘ XXX ‘,callback). The callback in the School component receives arguments.

The main. Js

El: '# app, render: h = > h (app), beforeCreate () {Vue. Prototype. $bus = this / / install global event bus},})Copy the code

School components:

<div class="school"> <h2> School name :{{schoolName}}</h2> <h2> School address :{{adress}}</h2> </div> </template> <script> export default { name:"School", props:['getSchoolName'], data() { return { schoolName:'shangguigu ', adress:'beijing' } }, mounted(){ this.$bus.$on('hello',(name)=>{ console.log('success',name) }) }, beforeDestroy(){ this.$bus.$off('hello') } } </script> <style> .school{ background-color:skyblue; padding: 5px; margin-top: 30px; } </style>Copy the code

Student module:

<div class="student"> <h2> student name :{{name}}</h2> </h2> </div> </template> <script> export default {name:"Student", data() {return {name:' zhang ', sex:' male '}}, methods:{ sendToSchool(){ this.$bus.$emit('hello',this.name) } }, // mounted(){ // console.log('Student',this.x) // } } </script> <style> .student{ background-color: orange; padding: 5px; } </style>Copy the code

5. Message subscription and publishing

This is done using the message subscription publishing plug-in, starting with a plug-in import pubsub from ‘pubsub-js’

School components:

<div class="school"> <h2> School name :{{schoolName}}</h2> <h2> School address :{{adress}}</h2> </div> </template> <script> import pubsub from 'pubsub-js' export default { name:"School", props:['getSchoolName'], data() { return { schoolName:'shangguigu ', Adress :' Beijing '}}, mounted(){subscribe. Subscribe ('hello',(msgName,data)=>{this.pubId =console.log(' Hello callback executed ',msgName,data)})}, beforeDestroy(){ pubsub.unsubscribe(this.pubId) } } </script> <style> .school{ background-color:skyblue; padding: 5px; margin-top: 30px; } </style>Copy the code

The Student component subscribles to a message (similar to the newspaper that receives hello, followed by a callback that receives the data), where the callback makes a value (identifier) that will be used in the future to unsubscribe.

Student module:

<div class="student"> <h2> student name :{{name}}</h2> </h2> </div> </template> <script> import pubsub from 'pubsub-js' export default { name:"Student", Data (){return {name:' c ', sex:' m '}}, methods:{sendToSchool(){pubsub.publish('hello',666)}}, } </script> <style> .student{ background-color: orange; padding: 5px; } </style>Copy the code

Publish (‘ message name ‘, data) in the Student component, publish(‘ message name ‘, data), the name of the message corresponds to the ‘newspaper name’ mentioned above, only if the name corresponds to (make sure the newspaper you ordered will be received).