Props and $emit

Props props, $emit props, $emit props, $emit props, look at the code… emmm

	Vue.component('child',{
        data(){
            return {
                mymessage:this.message
            }
        },
        template:` 
      
 
        
      
 `.props: ['message'].// Get the data from the parent component
        methods:{
            passData(val){
                // Triggers events in the parent component
                this.$emit('getChildData', val)}}}) ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┅ ┄ * ponent (Vue.com'parent', {template:` 
      
 
       
this is parent compoent! 
 
        
      
 `,
        data(){
            return {
                message:'Don't lose your nerve'}},methods: {// Executes the event triggered by the child component
            getChildData(val){
                console.log (val)}}}) ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┅ ┄ */ / a mount
    var app=new Vue({
        el:'#app'.template:` 
      
 
        
      
 `
    })
Copy the code

Central event busnew Bus

Create a new Vue event bus object and emit events via bus.$ON.

Vue.component('brother1', {data() {return {
                mymessage:'hello brother1'} }, template:` <div> <p>this is brother1 compoent! </p> <inputtype="text" v-model="mymessage"
                @input="passData(mymessage)"> </div> ', methods:{passData(val){// Trigger globalEvent bus.$emit('globalEvent', val)}}}) ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┅ ┄ * ponent (Vue.com'brother2',{ template:` <div> <p>this is brother2 compoent! < / p > < p > brother1 passed data: {{brothermessage}} < / p > < / div > `,data() {return {
                mymessage:'hello brother2',

                brothermessage:' '}},mounted(){// bind the globalEvent bus.$on('globalEvent',(val)=>{ this.brothermessage=val; })}}) ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┅ ┄ * / / the event bus var bus = new Vue (); var app=new Vue({ el:'#app',
        template:`
            <div>
                <brother1></brother1>
                <brother2></brother2>
            </div>
        `
    })
Copy the code

Dojo.provide and inject

Variables are provided by providers in the parent component and injected by inject in the child component. No matter how deep the child component is, as long as inject is invoked, the data in the provider can be injected. Rather than being limited to fetching data only from the prop property of the current parent component, child components can be called as long as the parent component lives.

Vue.component('child',{
        inject:['parent_var'],// Get the data from the parent componentdata() {return{ mymessage:this.parent_var } }, The template: ` < div > < / div > {{message}}}) ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┅ ┄ * ponent (Vue.com'parent',{template: '<div> <child></child> </div>', provide:{ Provide :{app:this}, all subsequent components by inject:['app'App.userinfo */ parent_var:'Anything (could be this, could be data in data)'
        },
        data() {return {
                message:'hello'}}}) ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┄ ┅ ┄ ┅ ┄ ┅ ┄ ┅ ┄ * var app = new Vue ({el:'#app',
        template:`
            <div>
                <parent></parent>
            </div>
        `
    })
Copy the code

$attrsAnd $listeners

Vue –>A –> B. What if App wants to pass data directly to B?Vue 2.4Begin to provideListeners solve this problem by allowing the component App to pass data directly to component B. I’ve highlighted the key points in the code,// ****** key point *****

App.vue introduces the A component

<template>
  <div id="app"> {{app}} // ****** key point ***** <A :app="app" @test="doTest"/>
  </div>
</template>

<script>
import A from "./components/A";

export default {
  name: "App".data() {
    return {
      app: "I'm App data."
    };
  },
  components: {
    A
  },
  methods: {
    doTest() {
      console.log(this.app)
    }
  }
};
Copy the code

A. ue Imports component B

<template>
  <div class="hello"> <h6> Here is A component </h6> <p>$attrs: {{$attrs}}</p>
    <p>$listeners: {{$listeners}}</p> // ****** key point ***** v-bind is passed$attrsV-on transmits all of them$listeners
    <B v-bind="$attrs" v-on="$listeners"/>
  </div>
</template>

<script>
import B from "./B";

export default {
  name: "A",
  props: {
    msg: String
  },
  components: { B },
  mounted() {
    console.log(this.$listeners); }}; </script>Copy the code

B component

<template>
  <div class="hello"> <h6> here is B component </h6> // ****** key point ***** <p>$attrs: {{$attrs}}</p>
  </div>
</template>

<script>

export default {
  name: "B",
  props: {
    msg: String
  },
  mounted() {// ****** key point ***** // why this can be directly passed by the emitApp componenttest? // Because there is A key operation in the A component that is <B v-bind="$attrs" v-on="$listeners"/>
    this.$emit("test"); }}; </script>Copy the code

$parentAnd $children

Get instances of the parent and child components, respectively

Vue.component('child',{props:{value:String, //v-model will automatically pass a prop property with value as the prop property},data() {return {
                mymessage:this.value
            }
        },
        methods:{
            changeValue(){
                this.$parent.message = this.mymessage; }}, template: '<div> <inputtype="text" v-model="mymessage" @change="changeValue"> 
            </div>
    })
    Vue.component('parent',{ template:` <div> <p>this is parent compoent! </p> <button @click="changeChildValue">test</button >
                <child></child>
            </div>
        `,
        methods:{
            changeChildValue(){
                this.$children[0].mymessage = 'hello'; }},data() {return {
                message:'hello'
            }
        }
    })
    var app=new Vue({
        el:'#app',
        template:`
            <div>
                <parent></parent>
            </div>
        `
    })
Copy the code

v-model

When the parent component passes a value to the child component via the V-model, a prop property of value is automatically passed, and the value of the V-model binding is automatically modified in the child component via this.$emit(‘ input ‘,val)

Vue.component('child',{props:{value:String, //v-model will automatically pass a prop property with value as the prop property},data() {return {
                mymessage:this.value
            }
        },
        methods:{
            changeValue(){
                this.$emit('input',this.mymessage); // Change the value of the v-model binding on the parent component}}, template: '<div> <inputtype="text" v-model="mymessage" @change="changeValue"> 
            </div>
    })
    Vue.component('parent',{ template:` <div> <p>this is parent compoent! </p> <p>{{message}}</p> <child v-model="message"></child>
            </div>
        `,
        data() {return {
                message:'hello'
            }
        }
    })
    var app=new Vue({
        el:'#app',
        template:`
            <div>
                <parent></parent>
            </div>
        `
    })
Copy the code

Boradcast and dispatch

This method is provided in VUe1.0, but not in Vue2.0. However, many open source software encapsulates this method, such as MIN UI and Element UI. Broadcast triggers events to specific parent components, and Dispatch triggers events to specific child components. In essence, this approach still uses recursive encapsulation of ON and EMIT, but it can be useful in some basic components. Note: All component names must be unique!!

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    var name = child.$options.componentName;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else{ broadcast.apply(child, [componentName, eventName].concat(params)); }}); }function dispatch(componentName, eventName, params) {
  		var parent = this.$parent;
      var name = parent.$options.componentName;
      while(parent && (! name && name ! == componentName)) { parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName; }}if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params)); }}exportdefault { methods: { dispatch(componentName, eventName, params) { dispatch.call(this, componentName, eventName, params); }, broadcast(componentName, eventName, params) { broadcast.call(this, componentName, eventName, params); }}};Copy the code

vuex

Not to say too much about vuex…

The second chapter is a very comprehensive explanation of vue fried chicken an important skill, component communication, I said this comprehensive we should have no opinion? Okay, that’s it…

If you think it’ll help, you might as well

praise

Continue to output these short and effective articles to help you master the most content in the shortest time. After all, who doesn’t like to do it once and for all? ❥ thank you ~ (^ _ -)

Subsequent directory

No nonsense vUE advanced advanced (a) component essence overview

No nonsense vUE advanced advanced (two) 8 kinds of component communication details

No nonsense vUE advanced advanced (iii) components advanced usage and best practices