Welche verschiedenen Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben?

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. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente und verwendet „this.$emit“, um das getData-Ereignis zu durchlaufen.

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

1. Routing-Parameter

Schritte:

①Fügen Sie den Parameter props: true hinzu, wenn Sie die Route definieren, und belassen Sie Parameterplatzhalter, wenn Sie den Routing-Pfad definieren: name『Verwendung: to="'path/'＋value"』props: true，在定义路由路径时要留有参数占位符: name『用法:to="'路径/'＋value"』

②在跳转到的页面加上参数props:['name']

③在跳转到的页面就获取到了name『用法: js中直接this. name；html中直接插值{<!-- -->{ name}}』

2、父组件向子组件传值

父组件向子组件传值就是通过在父组件中让子组件标签绑定父组件的数据，子组件的props接收父组件穿过来的值即可

步骤：

①父组件内设置要传的数据『data(){ parentid: value}』

②在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上『 mybtn>』

③在子组件添加参数props:['childid'],即可

代码：

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

结果展示：

3、子组件向父组件传值

子传父的实现方式就是用了 this.e m i t 来遍历 getData 事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg

步骤：

①由于父组件需要参数，所以在父组件中的标签上定义自定义事件，在事件内部获取参数；『@myEvent=" callback"在callback函数中接收参数』

②在子组件中触发自定义事件，并传参。『this.$emit('父组件中的自定义事件',参数)』

代码：

<template>
  <div>
	  <mybtn :style="{color:acolor,background:bcolor}" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn>
  </div>

</template>
<script>

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

</style>

4、非父组件之间传值

步骤：

(1)方法一、

①建立一个公共的通信组件(Vue)，需要传值的组件里引入该通信组件

②在一个中绑定一个事件this.on('eventname', this. id)

③在另一个组件中触发事件this.$ emit('eventname',( options)=>{})

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

③ Der Name wird in erhalten Seite, zu der gesprungen wird. Verwendung: direkt this.name in html; . Die übergeordnete Komponente übergibt 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 werden einfach übergeben der Wert

Schritte:

🎜🎜①Legen Sie die Daten fest, die in der übergeordneten Komponente übergeben werden sollen 『data(){ parentid: value}』🎜🎜②In der übergeordneten Komponente binden ein benutzerdefiniertes Attribut für die Unterkomponente, auf die in der Komponente verwiesen wird, und binden Sie die Daten an das benutzerdefinierte Attribut „ mybtn>“🎜🎜 ③Fügen Sie den Parameter props:['childid'] in der Unterkomponente, dann 🎜🎜🎜Code: 🎜🎜rrreee🎜🎜Ergebnisanzeige: 🎜🎜🎜🎜🎜🎜🎜3. Untergeordnete Komponente übergibt Wert an übergeordnete Komponente🎜🎜🎜🎜Sub-pass Die übergeordnete Implementierungsmethode besteht darin, this.e m i t zu verwenden, um das getData-Ereignis zu durchlaufen. Verwenden Sie zuerst die Schaltfläche, um das setData-Ereignis auszulösen, verwenden Sie this.emit in setData, um das getData-Ereignis zu durchlaufen, und geben Sie schließlich this.msg zurück. Schritte: 🎜🎜🎜① Da die übergeordnete Komponente Parameter erfordert, definieren Sie ein benutzerdefiniertes Ereignis auf der Beschriftung in der übergeordneten Komponente und rufen Sie die Parameter innerhalb des Ereignisses ab 『🎜@myEvent=" callback"Parameter in der Callback-Funktion empfangen　🎜
🎜🎜②Benutzerdefinierte Ereignisse in untergeordneten Komponenten auslösen und Parameter übergeben. 『this.$emit('Benutzerdefiniertes Ereignis in der übergeordneten Komponente', Parameter)』🎜🎜🎜Code: 🎜🎜rrreee🎜🎜🎜🎜🎜4. Übergeben 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 in this.on ('eventname', this. id)🎜🎜③Trigger-Ereignis in einer anderen Komponente this.$ emit('eventname',( options)=>{})🎜🎜 (2) Methode zwei: 🎜🎜Fügen Sie öffentliche Daten im lokalen Speicher hinzu, die auf zwei Seiten abgerufen und geändert werden können🎜🎜[Verwandte Empfehlung: „🎜vue.js-Tutorial🎜“]🎜

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