Wie kann ein Wert an die Vue-Komponente übergeben werden?

Komponentenwertübertragungsmethode: 1. Wert durch Routing übertragen; 2. Durch die Bindung der Unterkomponentenbezeichnung in der übergeordneten Komponente an die Daten der übergeordneten Komponente erhalten die Requisiten der Unterkomponente den von der übergeordneten Komponente übergebenen Wert , und die Requisiten der Unterkomponente empfangen den von der übergeordneten Komponente übergebenen Wert. 3. Wenn die untergeordnete Komponente den Wert an die übergeordnete Komponente übergibt, verwenden Sie „this.$emit“, um das getData-Ereignis zu durchlaufen. 4. Beim Übergeben von Werten ​​Zwischen nicht übergeordneten Komponenten bindet eine das Ereignis „this.on“ und die andere löst das Ereignis „this.$ emit“ aus oder fügt öffentliche Daten im lokalen Speicher hinzu. Dies kann auf zwei Seiten abgerufen werden

Die Art und Weise, wie die Vue-Komponente den Wert übergibt:

1. Routenparameterübergabe

Schritte:

①Fügen Sie beim Definieren des Routingpfads einen Parameterplatzhalter hinzu: name『Verwendung: an ="'path/'＋value"』

②Fügen Sie auf der Seite, zu der Sie springen, hinzu. Der obere Parameter props:['name']

③Der Name wird auf der Seite abgerufen, die zu „Verwendung: direkt this“ springt. name in js; direkte Interpolation {{ Name}} in HTML"

2. Wertübertragung von der übergeordneten Komponente zur untergeordneten Komponente

Die übergeordnete Komponente überträgt den Wert an die untergeordnete Komponente, indem sie das Tag der untergeordneten Komponente an die Daten der übergeordneten Komponente bindet und die Requisiten der untergeordneten Komponente empfangen der von der übergeordneten Komponente übergebene Wert

Schritte:

① Legen Sie die zu übertragenden Daten in der übergeordneten Komponente fest „data(){ parentid: value}“

② Binden Sie ein benutzerdefiniertes Attribut an die untergeordnete Komponente, auf die in der übergeordneten Komponente verwiesen wird Komponente und binden Sie die Daten an das benutzerdefinierte Attribut „ mybtn>』

③Fügen Sie den Parameter props:['childid'] in der untergeordneten Komponente hinzu, dann

Code:

<div id="app"><br/>    <mybtn :childid=&#39;parentid&#39; title="我是标题"></mybtn><br/></div><br/><script><br/>    new Vue({<br/>        el:"app",<br/>        data:{<br/>            parentid:"88888"<br/>        },<br/>        components:{<br/>            "mybtn" : {<br/>                props: [&#39;childid&#39;,&#39;title&#39;],<br/>                template: &#39;<button>我是{{childid}}号按钮{{title}}</button>&#39;<br/>            }<br/>        }<br/>    })<br/></script><br/>

Ergebnisanzeige:

3. Sub Die Art und Weise, wie die Komponente den Wert an die übergeordnete Komponente übergibt, besteht darin, this.e m i t zu verwenden, um das getData-Ereignis zu durchlaufen. Verwenden Sie zunächst die Schaltfläche, um das setData-Ereignis auszulösen this.emit in setData, um das getData-Ereignis zu durchlaufen und schließlich this.msg zurückzugeben

Schritte:

①Da die übergeordnete Komponente Parameter erfordert, definieren Sie ein benutzerdefiniertes Ereignis auf dem Etikett in der übergeordneten Komponente und rufen Sie die Parameter innerhalb des Ereignisses ab. @myEvent=" callback" empfängt Parameter in der Callback-Funktion"

② Benutzerdefinierte Ereignisse in untergeordneten Komponenten auslösen und Parameter übergeben. 『this.$emit('Benutzerdefiniertes Ereignis in der übergeordneten Komponente', Parameter)』

Code:

<template><br/>  <div><br/>      <mybtn :  style="max-width:90%" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn><br/>  </div><br/> <br/></template><br/><script><br/> <br/>  export default {<br/>    name : &#39;test&#39;,<br/>    data () {<br/>      return {<br/>        childid:"666",<br/>        acolor:&#39;blue&#39;,<br/>        bcolor:&#39;red&#39;<br/>      }<br/>    },<br/>    methods:{<br/>      getColor(colors){<br/>        //父组件就可以拿到子组件传过来的colors<br/>        console.log(colors)<br/>        this.acolor = "white";<br/>        this.bcolor = colors;<br/>      },<br/>      //接收多个参数<br/>      /*getColor(colors1,colors2){<br/>        console.log(colors1,colors2)<br/>        this.acolor = colors2;<br/>        this.bcolor = colors1;<br/>      }*/<br/>    },<br/>    components: {<br/>      &#39;mybtn&#39; : {<br/>        props : [&#39;parentid&#39;,&#39;title&#39;],<br/>        template : `<br/>          <div class="box"><br/>            <p>我最初是一张白纸</p><br/>            <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button><br/>          </div><br/>        `,<br/>        methods: {<br/>          changeColor(){<br/>          //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数<br/>           this.$emit(&#39;changeColorEvent&#39;,"orange")<br/>           //发送多个参数可以直接跟在后面<br/>           //this.$emit(&#39;changeColorEvent&#39;,"orange","white")<br/>          }<br/>        }<br/>      }<br/>    }<br/>  }<br/></script><br/><style scoped><br/> <br/></style><br/>

4. Übertragen von Werten zwischen nicht übergeordneten Komponenten

Schritte:

(1) Methode 1.

① Erstellen Sie eine öffentliche Kommunikationskomponente (Vue) und führen Sie die Kommunikationskomponente in die Komponente ein, die den Wert übergeben muss

② Binden Sie ein Ereignis this.on('eventname', this. id) in einem

③ In Ein anderes Ein Ereignis wird in einer Komponente ausgelöst this.$ emit('eventname',( options)=>{})

(2) Methode 2,

Fügen Sie öffentliche Daten im lokalen Speicher hinzu, die abgerufen und geändert werden können zwei Seiten

Das obige ist der detaillierte Inhalt vonWie kann ein Wert an die Vue-Komponente übergeben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!