Value passing problem of VUE2.0 components

##Transfer between Vue1.0 components

Use $on() to listen for events;

Use $emit() to trigger events on it;
Use $dispatch() to dispatch events, which bubble along the parent chain;
Use $broadcast() to broadcast events, and events are propagated downward to all descendants

After Vue2.0, $dispatch() and $broadcast() are deprecated, see https://cn.vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replacement

1. Pass the value from the child component to the parent component:

##Child.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  256623bcd80aa3c91f9a846bd694f708
    4a249f0d628e2318394fd9b75b4636b1子组件473f0a7621bec819994bb5020d29372a
    bbaeb6b073f547e8b824f32b1f1ffbf6想父组件传值65281c5ac262bf6d81768915a4a77ac0
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  export default{
    name: 'child',
    data(){
      return {}
    },
    methods: {
      childToParent(){
        this.$emit("childToParentMsg", "子组件向父组件传值");
      }
    }
  }
2cacc6d41bbb37262a98f745aa00fbf0parent.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  2f947c059f95c7b6013fe75febf72946
    4a249f0d628e2318394fd9b75b4636b1父组件473f0a7621bec819994bb5020d29372a
    9ad0f83789eb9175ed21edf64f1ad1533d6d58e436a0f6815a0e7fde69d49427
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  import Child from './child/Child.vue'
  export default{
      name:"parent",
    data(){
      return {
      }
    },
    methods: {
      showChildToParentMsg:function(data){
        alert("父组件显示信息："+data)
      }
    },
    components: {Child}
  }
2cacc6d41bbb37262a98f745aa00fbf0

2. Parent component passes value to child component

parent.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  2f947c059f95c7b6013fe75febf72946
    4a249f0d628e2318394fd9b75b4636b1父组件473f0a7621bec819994bb5020d29372a
    da17ececa97e8bfc58a962a95aaaf7883d6d58e436a0f6815a0e7fde69d49427
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  import Child from './child/Child.vue'
  export default{
     name:"parent",
    data(){
      return {
        parentMsg:'父组件向子组件传值'
      }
    },
    components: {Child}
  }
2cacc6d41bbb37262a98f745aa00fbf0

child.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  256623bcd80aa3c91f9a846bd694f708
    4a249f0d628e2318394fd9b75b4636b1子组件473f0a7621bec819994bb5020d29372a
    45a2772a6b6107b401db3c9b82c049c2子组件显示信息：{{parentToChild}}54bdf357c58b8a65c66d7c19c8e4d1140c6dc11e160d3b678d68754cc175188a
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  export default{
    name: 'child',
    data(){
      return {}
    },
    props:["parentToChild"]
  }
2cacc6d41bbb37262a98f745aa00fbf0

3. Use eventBus.js to pass value ---Brother Value transfer between components

##eventBus.js

import Vue from 'Vue'
export default new Vue()

App.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  2fb1ec095997abb5abb99340125c8b3b
    667b5c47da4085fc64758fca7020e5e7ac69719b91f38b44604e967c6fb67d87
    587320841735d76eaf0e5ad2cafb6ce120de0cd16ad2ec92b0aab8bf48ce3433
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import FirstChild from './components/FirstChild'
import SecondChild from './components/SecondChild'

export default {
  name: 'app',
  components: {
    FirstChild,
    SecondChild,
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

FirstChild.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  7ce5a6ecdbf05645a3703bcd3635f48c
    cf25fc085cd91e858dbbc56fb09e737d
    51d3fef3e98150ebebe2f52953534dd3向组件传值65281c5ac262bf6d81768915a4a77ac0
    0c6dc11e160d3b678d68754cc175188a
    45a2772a6b6107b401db3c9b82c049c2{{message}}54bdf357c58b8a65c66d7c19c8e4d114
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  import bus from '../assets/eventBus';
  export default{
    name: 'firstChild',
    data () {
      return {
        message: '你好'
      }
    },
    methods: {
      showMessage () {
       alert(this.message)        bus.$emit('userDefinedEvent', this.message);//传值
      }
    }
  }
2cacc6d41bbb37262a98f745aa00fbf0

SecondChild.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
    e2f085c06132a8a06abd7601f5d7c984
        4a249f0d628e2318394fd9b75b4636b1{{message}}473f0a7621bec819994bb5020d29372a
    94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    import bus from '../assets/eventBus';
    export default{
        name:'SecondChild',
        data(){
            return {
                message: ''
            }
        },
        mounted(){
            var self = this;            
            bus.$on('userDefinedEvent',function(message){                
            self.message = message;//接值            
            });
        }
    }

The above is the detailed content of Value passing problem of VUE2.0 components. For more information, please follow other related articles on the PHP Chinese website!