Heim  >  Artikel  >  Web-Frontend  >  Wertübergabeproblem von VUE2.0-Komponenten

Wertübergabeproblem von VUE2.0-Komponenten

一个新手
一个新手Original
2017-09-13 10:24:271343Durchsuche

Übergabe zwischen Vue1.0-Komponenten

Verwenden Sie $on(), um auf Ereignisse zu warten
Verwenden Sie $emit(), um Ereignisse darauf auszulösen.
Verwenden Sie $dispatch(), um Ereignisse zu versenden, die entlang der übergeordneten Kette nach oben sprudeln.
Verwenden Sie $broadcast(), um Ereignisse zu übertragen, und Ereignisse werden nach unten weitergegeben an alle Nachkommen

Nach Vue2.0 sind $dispatch() und $broadcast() veraltet, siehe https://cn.vuejs.org/v2/guide/migration.html#dispatch-and-broadcast -Ersetzung

1. Wertübergabe von der untergeordneten Komponente an die übergeordnete Komponente:

Kind .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. Übergeordnete Komponente übergibt Wert an untergeordnete Komponente

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. Verwenden Sie die Wertübergabe von eventBus.js – Wertübergabe zwischen Geschwisterkomponenten

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;//接值            
            });
        }
    }

Das obige ist der detaillierte Inhalt vonWertübergabeproblem von VUE2.0-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn