Vue04---pass value between parent and child components, non-parent and child components pass value

 

Table of contents

1. Passing values ​​between parent and child components

1. One-way data flow

 Non-props properties

 2. Passing values ​​between non-parent-child components

---

1. Passing values ​​between parent and child components

1. One-way data flow

The parent component passes the value to the child component, and the child component cannot modify the passed value of the parent component.

Parent components pass values ​​to child components through parameter props, and child components pass values ​​to parent components through events that trigger $emit

father to son

Specific implementation: the parent component introduces the child component through import, and registers, and adds the attributes to be passed on the child component label, and the child component receives it through props. There are two forms of reception: one is through the array form ['properties to be received'], The second is to receive through the object form { }, the object form can set the data type and default value to be transferred, and the array is simply received

 child's father

Specific implementation: the subcomponent triggers the function through the binding event, and sets this.$emit('custom event to be dispatched', the value to be passed). There are two parameters in $emit. One is the self-defined event to be dispatched. Define the event, the second parameter is the value to be passed and then in the parent component, the custom event dispatched by @ on this child component, the default value accepted by the method in the methods triggered by the binding event is the passed parameter

 Non-props properties

If the parent component is passed, if the child component is not connected, the attribute will be displayed on the label

 2. Passing values ​​between non-parent-child components

1. Modify the value passing of non-parent-child components through a bus bus

(publish subscriber mode, observer mode

By attaching a bus attribute to the vue class, the bus attribute creates a vue instance, so the instance created through vue will have the bus attribute, and they all point to the same vue instance.

this.bus.$emit() is the outgoing trigger method.

this.bus.$on() is the monitoring method

Method 1: Implemented through event bus

    Specific implementation: Create an empty vue and expose it. This is used as a public bus, that is, as a bridge between two components. Introduce the bus just created in the two sibling components, and pass bus.$emit in component A ( 'Custom event name', the value to be sent) send data, and receive data in component B through bus.$on('custom event name', function(v) { //v is the value to be received})

  First create a bus.js file and operate in this file

import Vue from 'vue'
const Bus = new Vue()
export default Bus

Then import it in the main.js file

import EventBus from '@/bus.js'
Vue.use(EventBus)
Vue.prototype.$EventBus = EventBus

Then you can use it, for example, in a file, distribute this value

this.$EventBus.$emit('uploading','sure')

 The reception in the b file can be placed in mounted

mounted() {
       this.$EventBus.$on('uploading', val=>{
       console.log(val)       //打印出来 val ：sure
     })
  }

Multiple values ​​can also be dispatched

this.$EventBus.$emit('Click', {
        id: id,
        num:num
      })

 this.$EventBus.$on('Click', ({ id,num }) => {
       console.log(id,num)        
    })

Method 2: Implemented through vuex

     Specific implementation: vuex is a state management tool that mainly solves the data sharing problem of large and medium-sized complex projects. It mainly includes five elements: state, actions, mutations, getters and modules. The main process: components are dispatched to actions, and actions are asynchronous operations. In actions, commit to mutations, and mutations change state through logical operations, so as to synchronize to components and update their data status