1. The parent component passes values to the child component

Use props to accept the value

Parent the parent

<template> <div> <div> Parent </div> <div> sends the message to the first child component :{{MSG}}</div> <div> <div id="child1"> MSG =" MSG "/> </div> </div> </div> </template> <script> import ChildOne from ".. /components/children1"; import ChildTwo from ".. /components/children2"; Export default {components: {ChildOne, ChildTwo}, data() {return {MSG: "I am the parent component, send message to the child component ",}; }}; </script>Copy the code

In the code above, the parent component passes MSG to the first child component childone, which defines a MSG to accept the value of the MSG passed in.

The first child component, childN1

<template> <div> <div id="title"> The first child </div> <div> receives a message from the parent: {{msg}}</div> </div> </template> <script> export default { props: { msg: { type: String } } }; </script>Copy the code

2. Child components pass values to parent components

Use $emit to send the desired value out as a function and receive it in the parent component

The second child component, children2

<template> <div> <div id="title"> The second child </div> <div> to send to the parent: {{MSG}}</div> < button@click ="toParent"> </button> </div> </template> <script> export default {data() {return { MSG: "I am the second child, pass the value to the parent ",}; }, methods: { toParent() { this.$emit("toParent", this.msg); }}}; </script>Copy the code

Button bindings a click event that fires the toParent method. The toParent method uses the emit(‘ toParent ‘,date) binding to send the value to the parent component and receives it from @toparent = ‘method’. And get the value that the emit(‘toParent’, date) binding needs to pass to the parent, then receive it in the parent using @toparent =’method’ and get the value that the emit(‘toParent’, date) binding needs to pass to the parent, It is then received in the parent component using @toparent = ‘method’ and gets the emit return value.

Parent the parent

<template> <div> <div> Parent </div> <div> is about to receive the second component pass value: {{child2Msg}}</div> <div> <div id="child2"> <ChildTwo @toParent="getMag" /> </div> </div> </div> </template> <script> import ChildOne from ".. /components/children1"; import ChildTwo from ".. /components/children2"; export default { components: { ChildOne, ChildTwo }, data() { return { child2Msg: "" }; }, methods: { getMag(msg) { this.child2Msg = msg; }}}; </script>Copy the code

$emit(‘ XXX ‘, date); this.$emit(‘ XXX ‘, date);

3. Non-parent components (sibling components) pass values

Intermediate values need to be introduced to solve the problem. Bus is used here. In the main.js file of vue, define bus with vue.prototype. bus=new vue () and declare the intermediate quantity

First child component (passing value from this component to another component)

<template> <div> <div id="title"> The first child </div> will send a message to the second sibling: <input type="text" v-model="to" /> </div> < button@click ="toBrother"> export default { data() { return { to: "hi, brother" }; }, methods: { toBrother() { this.bus.$emit("toBrother", this.to); }}}; </script>Copy the code

Ps: Similar to the way a child component passes a value to its parent, use $emit to pass.

Second child component (the component to accept)

<template> <div> <div id="title"> </div> <div> {{get}}</div> </div> </template> <script> export default { data() { return { get: "" }; } beforeCreate() { this.bus.$on("toBrother", msg => { this.get = msg; }); }}; </script>Copy the code

The second subcomponent uses the beforeCreate declaration period to obtain the received value, and is implemented with this.bus.on, the first parameter is th I S. B U S. The first argument is the name of the method defined by this.bus.emit and the second argument is a method (a method with a return argument, typically using the arrow function). Ps: you can also create a global vue instance and reference the instance creation path in the component you want to pass: @root/utils/event-bus.js

import Vue from "vue"
export default new Vue()

Copy the code

First child component

<template> <div> <div id="title"> I am the first child </div> I am going to send a message to the second sibling: <input type="text" v-model="to" /> </div> < button@click ="toBrother"> import event from '@root/utils/event-bus'; export default { data() { return { to: "hi, brother" }; }, methods: { toBrother() { event.$emit("toBrother", this.to); }}}; </script>Copy the code

Second subcomponent

<template> <div> <div id="title"> I am the second child </div> <div> {{get}}</div> </div> </template> <script> import event from '@root/utils/event-bus'; export default { data() { return { get: "" }; } beforeCreate() { event.$on("toBrother", msg => { this.get = msg; }); }}; </script>Copy the code