简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > Front-End-Fragen und Antworten > Hauptteil

Welche verschiedenen Möglichkeiten gibt es, Daten in VueJS zu übergeben?

青灯夜游
Freigeben： 2023-01-11 09:22:08
Original
1862 Leute haben es durchsucht

Übertragungsmethode: 1. Verwenden Sie „props“ in der übergeordneten Komponente, um Daten an die untergeordnete Komponente zu übertragen. 2. Die untergeordnete Komponente verwendet „this.$emit(„event“)“, um Daten an die übergeordnete Komponente zu übertragen. Verwenden Sie gemeinsame Dateien zwischen Geschwisterkomponenten. Übergeben Sie Daten. 4. Verwenden Sie „ref/refs“, um Daten zwischen übergeordneten und untergeordneten Komponenten zu übertragen. 5. Verwenden Sie Vuex, um Daten usw. zu übertragen.

Welche verschiedenen Möglichkeiten gibt es, Daten in VueJS zu übergeben?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

1. Eltern-zu-Kind-Übertragung

(1) Binden Sie eine Eigenschaft an die untergeordnete Komponentenbezeichnung der übergeordneten Komponente und mounten Sie die zu übertragenden Variablen.

(2) Akzeptieren Sie Daten über Requisiten in der untergeordneten Komponente be Arrays können auch Objekte sein und die empfangenen Daten können direkt verwendet werden props: ["property name"] props: {property name: data type}

Codebeispiel: 

//父组件
<template>
  <p>
    <i>父组件</i>
    <!--页面使用-->
    <son :data=&#39;name&#39;></son> 
  </p>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>
Nach dem Login kopieren
//子组件
<template>
  <p>{{data}}</p>
</template>

<script>
export default {
components: { },
  name: &#39;子组件&#39;,
  props:["data"],
};
</script>
Nach dem Login kopieren

2. Vom Kind zum Elternteil übergeben

(1) Passen Sie ein Ereignis auf der Bezeichnung der untergeordneten Komponente der übergeordneten Komponente an und rufen Sie dann die erforderliche Methode auf.
(2) Verwenden Sie this.$emit("event") in der Methode der untergeordneten Komponente, um das in definierte Ereignis auszulösen Die Daten werden

Codebeispiel in Form von Parametern übergeben: 

//父组件
<template>
  <p>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </p>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert(&#39;子传父&#39;)
    }
  },
};
</script>
Nach dem Login kopieren
//子组件
<template>
  <p>
    <button @click="lcalter">点我</button>
  </p>
</template>

<script>
export default {
components: { },
  name: &#39;子组件&#39;,
  methods: {
    lcalter(){
      this.$emit(&#39;lcclick&#39;)//通过emit来触发事件
    }
  },
};
</script>
Nach dem Login kopieren

3. Brother-Komponentenkommunikation (Bus)

(1) Erstellen Sie eine neue Bus.js-Datei in src und exportieren Sie dann eine leere Vue-Instanz
(2) Führen Sie Bus.js auf der Seite ein, die Daten überträgt, und versenden Sie dann Ereignisse über Bus "). , die Daten werden von emit("event name", "parameter") versendet und die Daten werden in Form von Parametern von emit()
(3) übergeben. Führen Sie Bus.js auf der Seite ein, die die Daten akzeptiert und verwenden Sie dann Bus.$ on("Event Name", (Daten) =>{Daten sind die akzeptierten Daten})

Bildbeispiel:

Welche verschiedenen Möglichkeiten gibt es, Daten in VueJS zu übergeben?

Welche verschiedenen Möglichkeiten gibt es, Daten in VueJS zu übergeben?

Welche verschiedenen Möglichkeiten gibt es, Daten in VueJS zu übergeben?

IV.ref/ refs (Kommunikation zwischen übergeordneter und untergeordneter Komponente)

(1) Wenn ref für ein normales DOM-Element verwendet wird, zeigt die Referenz auf das DOM-Element; wenn es für eine Unterkomponente verwendet wird, zeigt die Referenz auf die Komponenteninstanz
(2 ) Sie können die Methode der Komponente direkt aufrufen oder über die Instanz auf Daten zugreifen. Es kann auch als eine Möglichkeit für untergeordnete Komponenten betrachtet werden, Werte an übergeordnete Komponenten zu übertragen. und dann auf Mutationen in Aktionen festlegen, und Mutationen werden dann weitergegeben. Die logische Operation ändert den Zustand, synchronisiert ihn dadurch mit der Komponente und aktualisiert ihren Datenstatus

Codebeispiel: 

//父组件
<template>
  <p>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </p>
</template>
<script>
import child from &#39;./child.vue&#39;
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>
Nach dem Login kopieren
//子组件
<template>
  <p>child 的内容</p>
</template>
<script>
export default {
  data () {
    return {
      name: &#39;我是 child&#39;,
    }
  },
  methods: {
    sayHello () {
      console.log(&#39;hello&#39;);
      alert(&#39;hello&#39;);
    }
  }
}
</script>
Nach dem Login kopieren
//父组件
template>
  <p id="app">
    <ChildA/>
    <ChildB/>
  </p>
</template>
<script>
  import ChildA from &#39;./ChildA&#39; // 导入A组件
  import ChildB from &#39;./ChildB&#39; // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>
Nach dem Login kopieren
//子组件A
<template>
 <p id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </p>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: &#39;Hello，B组件，我是A组件&#39;
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit(&#39;receiveAMsg&#39;, {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>
Nach dem Login kopieren

6.$parent

Sie können das erhalten Über die übergeordnete Komponenteninstanz können Sie dann über diese Instanzmethode auf die Eigenschaften und Attribute der übergeordneten Komponente zugreifen. Sie verfügt auch über eine übergeordnete übergeordnete Komponente, die die Instanz der übergeordneten Komponente abrufen kann, und Sie können dann auf die Eigenschaften und Methoden der übergeordneten Komponente zugreifen Über diese Instanz verfügt sie auch über eine übergeordnete Komponente, die die übergeordnete Komponenteninstanz abrufen kann. Über diese Instanz können Sie dann auf die Eigenschaften und Methoden der übergeordneten Komponente zugreifen. Außerdem gibt es eine übergeordnete Komponente, über die die übergeordnete Komponenteninstanz abgerufen werden kann .

Codebeispiel: 

//子组件B
<template>
 <p id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </p>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: &#39;Hello，A组件，我是B组件&#39;
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit(&#39;receiveBMsg&#39;, {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>
Nach dem Login kopieren

7.sessionStorage-Wertübergabe

sessionStorage ist ein globales Objekt des Browsers und die darin gespeicherten Daten werden gelöscht, wenn die Seite geschlossen wird. Mit dieser Funktion können wir eine Kopie der Daten auf allen Seiten teilen.

Codebeispiel: 

//vuex
import Vue from &#39;vue&#39;
 import Vuex from &#39;vuex&#39;
 Vue.use(Vuex)
 const state = {
   AMsg: &#39;&#39;,
   BMsg: &#39;&#39;
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })
Nach dem Login kopieren

Hinweis: Es werden Schlüssel-Wert-Paare gespeichert, bei denen es sich nur um Zeichenfolgentypen handeln kann. Wenn Sie Objekte speichern möchten, müssen Sie diese mit let objStr = JSON.stringify(obj) konvertieren strings und dann Storage (bei Verwendung wird es von obj = JSON.parse(objStr) in ein Objekt analysiert).

Empfehlen Sie einen Bibliotheks-Good-Storage, der sessionStorage kapselt, und Sie können seine API direkt zum Speichern von Objekten verwenden

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。
Nach dem Login kopieren

8. Routing-Wertübertragung

Verwenden Sie das Fragezeichen, um den Wert zu übertragen

Verwenden Sie dies, wenn zu Seite A gesprungen wird Seite B. r o u t e r . p u s h ( ' / B ? n a m e = d a n s e e k ' ) Seite B kann t h i s verwenden. router.push('/B?name=danseek') Seite B kann this.router.push('/B?name verwenden =danseek') B-Seite kann this.route.query.name verwenden, um den von A-Seite übergebenen Wert abzurufen Folgende Route:

// 保存数据到 sessionStorage
sessionStorage.setItem(&#39;key&#39;, &#39;value&#39;);

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem(&#39;key&#39;);

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem(&#39;key&#39;);

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
Nach dem Login kopieren

Auf Seite B können Sie den Wert des von der Route übergebenen Namens hierüber abrufen.$route.params.name

Verwenden Sie die Eltern-Kind-Komponente, um den Wert zu übergebenSeit der Router-Ansicht selbst Da die Route nach der Typaktualisierung nicht aktualisiert wird, können wir den neuesten Typwert nicht direkt abrufen Stattdessen müssen Sie watch verwenden

<router-view :type="type"></router-view>

// 子页面
props: [&#39;type&#39;]
watch: {
       type(){
           // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
       },
},
Nach dem Login kopieren

九.祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改

祖组件：

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from &#39;./Parent&#39;
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>
Nach dem Login kopieren

父组件

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from &#39;./Children&#39;

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:[&#39;name&#39;],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>
Nach dem Login kopieren

子组件

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:[&#39;sex&#39;,&#39;age&#39;,&#39;hobby&#39;,&#39;name&#39;],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit(&#39;sayKnow&#39;,&#39;我知道啦&#39;)
      }
    },
    mounted() {
    }
  }
</script>
Nach dem Login kopieren

十.孙传祖使用$listeners

文字内容同第九个

祖组件

<template>
  <p id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </p>
</template>
<script>
import ChildrenOne from &#39;../src/components/children.vue&#39;
export default {
  name: &#39;App&#39;,
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: &#39;&#39;
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>
Nach dem Login kopieren

父组件

<template>
  <p>
    <children-two v-on="$listeners"></children-two>
  </p>
</template>

<script>
import ChildrenTwo from &#39;./childrenTwo.vue&#39;

export default {
  name: &#39;childrenOne&#39;,
  components: {
    ChildrenTwo
  }
}
</script>
Nach dem Login kopieren

子组件

<template>
  <p>
    <button @click="setMsg">点击传给祖父</button>
  </p>
</template>

<script>
export default {
  name: &#39;children&#39;,
  methods: {
    setMsg() {
      this.$emit(&#39;eventOne&#39;, &#39;123&#39;)
    }
  }
}
</script>
Nach dem Login kopieren

十一.promise传参

promise 中 resolve 如何传递多个参数

//类似与这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})
Nach dem Login kopieren

resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。

如果想多个用数组，或者对象方式。。

数组

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3]) 
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})
Nach dem Login kopieren

对象

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})
Nach dem Login kopieren

十二.全局变量

定义一个全局变量，在有值的组件直接赋值，在需要的组件内直接使用就可以了，具体的话看我这篇博客就可以，
博客链接点击就好 全局变量 篇

到此这篇关于vue传值方式的十二种方法总结的文章就介绍到这了,更多相关vue传值方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关推荐：《vue.js教程》

Das obige ist der detaillierte Inhalt vonWelche verschiedenen Möglichkeiten gibt es, Daten in VueJS zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
vue 传递数据
Quelle：php.cn
Vorheriger Artikel：Können Vuejs als Website verwendet werden? Nächster Artikel：Was können Vuejs?
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Verwenden von Variablen, die in Methoden in Vorlagen definiert sind Dies ist das erste Mal, dass ich Vue verwende (v2, nicht v3) und ich habe versucht, Variab...
Aus 2024-04-06 18:10:25
0
2
513
Erstellen Sie Benutzer in Vue mit Firebase, keine Anmeldung erforderlich Ich habe ein Formular zum Erstellen von Benutzerprofilen erstellt. Aber wann immer ich ein...
Aus 2024-04-06 14:20:12
0
1
514
Beheben von Problemen beim Produktions-Build von Vue3-Webkomponenten Ich versuche, meine vue2web-Komponenten auf vue3 zu migrieren, obwohl das Problem auftritt...
Aus 2024-04-06 12:43:37
0
1
473
vue vee-validate erfasst das Problem der Datumsauswahlauswahl Die V-Modell-Bindung in meinem Datepicker-Feld funktioniert nicht richtig. Wenn Sie eine A...
Aus 2024-04-06 11:38:56
0
1
510
Gibt es eine Möglichkeit, die Routenstütze in Vue festzulegen? Ich möchte zu einer bestimmten Registerkarte auf der Seite this.$router.push({name:"A...
Aus 2024-04-06 11:35:59
0
1
456
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！