Welche Möglichkeiten gibt es, Werte in Vue zu übergeben? Einführung in häufig verwendete Wertübergabemethoden in Vue (3 Typen)

In diesem Artikel erfahren Sie, was die Wertübertragungsmethoden von Vue sind. Eine Einführung in häufig verwendete Wertübertragungsmethoden in Vue (3 Arten) hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

1. Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente
1. Verwenden Sie Requisiten, um einen Datenkanal einzurichten

       // 这是父组件 
      <div id="app">
          // 这是子组件 
          <child message="hello" ></child>
      </div>

2. Daten, die über Requisiten in der untergeordneten Komponente weitergeleitet werden

2. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente 1. Ein Klickereignis ist erforderlich, um ein benutzerdefiniertes Ereignis in der untergeordneten Komponente

 Vue,component('child',{
     props:['message']
 })

auszulösen. 2. Das untergeordnete Tag in der übergeordneten Komponente lauscht auf das benutzerdefinierte Ereignis und erhält den übergebenen Wert

Vue.component('child',{
    methods:{
        handleClick(){
        // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
            this.$emit('parentClick',123)
        }
    },
    template:`        <div>
            <h1>这是子组件</h1>
            <button @click="handleClick" >
                发送给父组件            </button>
        </div>
    `
})

3. Übergeben von Werten von Nicht-Eltern-Kind-Komponenten Manchmal müssen zwei Komponenten auch Werte übergeben (Nicht-Eltern-Kind-Beziehung), daher benötigen wir einen gemeinsamen Wert, um Werte zu übergeben ​​und Werte abrufen
1. Erstellen Sie einen leeren Wert

Vue.component('parent', {
    data() {
        return {
            msg: '我是子组件'
        }
    },
    methods: {
        receiveMsg(value) {
            console.log(value)
            this.msg = value
        }
    },
    template:&#39;        <div>
            <h1>这是子组件</h1>
            <p>接收子组件传过来的值{{msg}}</p>
            <child @parentClick=&#39;receiveMsg&#39;></child>
        </div>
    &#39;
})

2. Definieren Sie in Komponente 1 $emit, um Daten zu senden

  // 创建一个空的公共的vue对象
    var bus = new Vue();

3 weiter, um die übergebenen Daten zu empfangen

bus.$emit('test','数据')

Natürlich gibt es mehr als eine Möglichkeit, Werte vom Elternteil an das Kind zu übergeben. Wir können auch localstorage verwenden, um Werte zu übergeben und abzurufen

bus.$on('test', function(num) {
     this.msg= num;       //事件的解绑问题 
        bus.$off("test")
 })

Verwandte Empfehlungen:

Methode zur Wertübergabe zwischen Vue-Komponenten

Wie erhält Vue das aktuell angeklickte Element und übergibt den Wert

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Werte in Vue zu übergeben? Einführung in häufig verwendete Wertübergabemethoden in Vue (3 Typen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!