Components in VUE can pass values in three ways: parent to child, child to parent, or non-parent to parent

preface

The parent-child component relationship can be summarized as prop passing down and events passing up

In short, the parent sends data to the child via prop, and the child sends messages to the parent via events, as shown in the figure below

The father the son

The parent component is passed by properties, and the child component is received by props

  • The parent component
    / / the parent component
    <template>
   <div class=' '>Here is the parent component<! -- Reference child component -->
       <LoginChild :msg='txt' ></LoginChild>    <! -- Define the sub component props receive name -->
   </div>
</template>
<script>

import LoginChild from "./loginChild.vue"   // Introduce child components

export default {
   data(){
      return {
          txt:"This is the value of the parent component."}},components:{
       LoginChild  // Register child components
   },

    methods: {deliver(data){
           this.txt=data
       }
   }
}
</script>
Copy the code
  • Child components
    / / child component
    <template>
       <div class=' '>Here is the subcomponent -- {{MSG}} --</div>
    </template>
    <script>
    export default {
       props: {msg: {type:String.default:' '}}},</script>
Copy the code

In general, the method of parent to child is to use the props property, and the child component uses the props property to receive the value transmitted from the parent component. When the parent component transmits the value, it uses v-bind to bind the variable name reserved in the child component to the data in the data

Child the parent

  • Child components
<template>
   <div class=' '>Here are the child components<input
            type="text"
            placeholder="Please enter your mobile phone number."
            v-model="username"
            @input="userFun"
        />
   </div>
</template>
<script>
export default {
    data(){
        return {
            username:""}},methods: {userFun(e){
            this.username=e.target.value
            // Emit passes two values, the first is the name of the definition and the second is the value that needs to be passed to the parent component
            this.$emit("change".this.username); }}},</script>
Copy the code
  • The parent component
<template>
   <div class=' '>Here is the parent component<! -- Reference child component -->
       <LoginChild @change="changeFun" ></LoginChild> <! Receive child component definition event name -->
       
   </div>
</template>
<script>

import LoginChild from "./loginChild.vue"   // Introduce child components

export default {
   data(){
      return {
          value: {name:' '}}},// Register child components
   components:{
       LoginChild
   },
   methods: {changeFun(val){  // Where val is the value passed by the child component
           this.name=val
           console.log(this.name)
       }
   }
}
</script>
Copy the code

This.$emit emits the userFun event to the parent component and sends this. Username to the parent component using this

Conclusion:

  • Custom events need to be triggered in some way in a child component, such as a click event method
  • Take the value to be passed as$emitIs passed as an argument to the method that responds to the custom event
  • Registers the child component in the parent component and binds listeners to custom events on the child component label

Non-parent transmission value

It can also be called common component transmission. As the name implies, two components that have no parent-child relationship need to transmit values through a common component, that is, define an event bus to transmit values between brothers

$on(‘Fun’,(val)=>{}) and emit(‘Fun’,” transmitted data “) on the sending side. The receiving side must emit an event first

  • Common components
import Vue from 'vue'
export default new Vue()
Copy the code
  • Component 1 (Data sender)
<template>
  <div class="one">
      one
      <button @click="Fun">one</button>
  </div>
</template>

<script>
// Introduce common components
import bus from '@/utils/bus.js';

export default {
  methods: {Fun(){
        bus.$emit('asd'."One to two.")}}}</script>

Copy the code
  • Component 2 (Receiving party)
<template>
  <div class="two">
      two
  </div>
</template>

<script '>' // import bus from '@/utils/bus.js'; Export default {created(){//// this.fun () // this is ！！！！ }, the methods: {Fun () {/ / receiving data bus $on (' asd '(val) = > {the console. The log (' I received one to two values')})}}}</script>
Copy the code