Problème de transmission de valeur des composants VUE2.0

Passage entre les composants Vue1.0

Utilisez $on() pour écouter les événements ; 🎜> Utilisez $emit() pour déclencher des événements dessus ;
Utilisez $dispatch() pour distribuer des événements, qui bouillonnent le long de la chaîne parent
Utilisez $broadcast() pour diffuser des événements, et les événements sont propagés vers le bas ; à tous les descendants

Après Vue2.0, $dispatch() et $broadcast() sont obsolètes, voir https://cn.vuejs.org/v2/guide/migration.html#dispatch-and-broadcast -remplacement

1. Passage de la valeur du composant enfant au composant parent :

Enfant .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. Le composant parent transmet la valeur au composant enfant

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

enfant.vue

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

3. Utilisez le passage de valeur eventBus.js --- le passage de valeur entre les composants frères

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!