Welche Methoden gibt es zum Übergeben von Werten in Vue-Komponenten?

Vue-Komponentenwertübertragungsmethode: 1. Verwenden Sie Requisiten, um den Wert vom übergeordneten Element zum übergeordneten Element zu übertragen. 3. Verwenden Sie EventBus oder Vuex, um den Wert zum übergeordneten Element zu übertragen „provide/inject“- oder „$attrs/$listeners“-Methode zur ebenenübergreifenden Werteübertragung.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, Dell G3-Computer.

Wir alle wissen, dass Vue ein leichtes Front-End-Framework ist und sein Kern in der komponentenbasierten Entwicklung liegt. Vue besteht aus einzelnen Komponenten und ist eine seiner leistungsstärksten Funktionen. Die Bereiche von Komponenteninstanzen sind unabhängig voneinander, was bedeutet, dass Daten zwischen verschiedenen Komponenten nicht aufeinander verweisen können.

Aber im eigentlichen Projektentwicklungsprozess müssen wir auf die Daten anderer Komponenten zugreifen, sodass es ein Problem mit der Komponentenkommunikation gibt. Die Beziehungen zwischen den Komponenten in Vue sind: Vater-Sohn, Bruder und Generation. Als nächstes werden wir darüber sprechen, wie die Datenübertragung für verschiedene Beziehungen implementiert wird.

1. Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente

Das heißt, die übergeordnete Komponente übergibt den Wert über Attribute an die untergeordnete Komponente und die untergeordnete Komponente empfängt ihn über Requisiten.

• Binden Sie benutzerdefinierte Attribute im Tag der untergeordneten Komponente der übergeordneten Komponente.

• // 父组件
  <user-detail :myName="name" />
      
  export default {
      components: {
          UserDetail
      }
      ......
  }

• Verwenden Sie Requisiten (kann ein Array oder ein Objekt sein) in der untergeordneten Komponente, um sie zu empfangen. Es können mehrere Attribute übergeben werden.

• // 子组件
  export default {
      props: ['myName']
  }
  
  /*
  props: { myName: String } //这样指定传入的类型，如果类型不对会警告
  props: { myName: [String, Number] } // 多个可能的类型
  prosp: { myName: { type: String, requires: true } } //必填的的字符串
  props: { 
      childMsg: { 
          type: Array, 
          default: () => [] 
      }
  }  // default指定默认值
  如果 props 验证失败，会在控制台发出一个警告。
  */

Der von der untergeordneten Komponente empfangene Wert der übergeordneten Komponente ist in zwei Typen unterteilt: Referenztyp und allgemeiner Typ:

Gemeinsame Typen: Zeichenfolge, Zahl, Boolean, Null

Referenztypen: Array, Objekt

Basierend auf dem Einseitiger Datenfluss von Vue, d Daher sollten Sie diesen Vorgang vermeiden, bei dem der von der übergeordneten Komponente übergebene Wert direkt geändert wird, da die Konsole sonst einen Fehler meldet.

• Wenn der übergebene Wert ein einfacher Datentyp ist, kann er in der untergeordneten Komponente geändert werden und hat keine Auswirkungen auf andere Geschwisterkomponenten, die den Wert ebenfalls von der übergeordneten Komponente aufrufen.

  Der konkrete Vorgang besteht darin, den übergebenen Wert zunächst einer Variablen in den Daten neu zuzuweisen und dann diese Variable zu ändern .

// 子组件
export default {
    props: ['myName'],
    data() {
        return {
            name : this.myName    // 把传过来的值赋值给新的变量
        }
    },
    watch: {
        myName(newVal) {
            this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
        }
    },
    methods: {
        changeName() {  
            this.name = 'Lily'  // 这里修改的只是自己内部的值，就不会报错了
        },
    }
}

• Hinweis: Wenn Sie watch nicht verwenden, um den von der übergeordneten Komponente übergebenen myName-Wert zu überwachen, ändert sich der name-Wert in der untergeordneten Komponente nicht mit dem myName-Wert der übergeordneten Komponente, da name in Daten: Dieser .myName definiert lediglich einen Anfangswert.

• Wenn der Wert des Referenztyps in der untergeordneten Komponente geändert wird, wird auch die übergeordnete Komponente geändert, da die Daten öffentlich sind, und andere untergeordnete Komponenten, die ebenfalls auf den Wert verweisen, werden ebenfalls entsprechend geändert. Es versteht sich, dass der von der übergeordneten Komponente an die untergeordnete Komponente übergebene Wert dem Erstellen einer Kopie entspricht. Der Zeiger dieser Kopie zeigt weiterhin auf den Wert in der übergeordneten Komponente, dh er hat dieselbe Referenz. Wenn also keine besonderen Anforderungen vorliegen, sollten Sie es nicht einfach ändern.

2. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente.

1. Die untergeordnete Komponente bindet ein Ereignis und löst es dadurch aus untergeordnete Komponente und definieren Sie eine Funktion für dieses Ereignis. Definieren und binden Sie das handleChange-Ereignis in der übergeordneten Komponente. Über die Rückruffunktion definieren Sie zunächst eine Rückruffunktion in der übergeordneten Komponente und übergeben Sie den Rückruf Funktion dort

// 子组件
<button @click="changeParentName">改变父组件的name</button>

export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit(&#39;handleChange&#39;, &#39;Jack&#39;) // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

Empfangen und führen Sie die Rückruffunktion in der untergeordneten Komponente aus

// 父组件
<child @handleChange="changeName"></child>

methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

3. Greifen Sie über $parent / $children oder $refs auf die Komponenteninstanz zu. Beide erhalten die Komponenteninstanz direkt und können aufgerufen werden direkt nach der Verwendung von Komponentenmethoden oder Zugriffsdaten.

// 父组件
<child :callback="callback"></child>
methods: {
    callback: function(name) {        this.name = name
    }
}

// 子组件
<button @click="callback(&#39;Jack&#39;)">改变父组件的name</button>
props: {
    callback: Function,
}

Hinweis: Die Komponentenkommunikation auf diese Weise kann nicht über Ebenen hinweg erfolgen.

4. $attrs / $listeners Klicken Sie hier für Details

三、兄弟组件之间传值

1、还是通过 $emit 和 props 结合的方式

在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件

// 父组件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: &#39;John&#39;
        }
    },
    components: {
        &#39;child-a&#39;: ChildA,
        &#39;child-b&#39;: ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件

// child-b 组件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit(&#39;changeName&#39;, &#39;Lily&#39;)   // 触发事件并传值
        }
    }
}
</script>

// child-a 组件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return &#39;John&#39; //没有传值的默认值
        }
    }
}
</script>

即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。

2. 通过一个空 vue 实例

创建一个 EventBus.js 文件，并暴露一个 vue 实例

import Vue from 'Vue'export default new Vue()

在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数

(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)

<template>
    <div>
        <p>姓名: {{ name }}</p>
        <button @click="changeName">修改姓名</button>
    </div>
</template>

<script>
import { EventBus } from "../EventBus.js"

export default {
 data() {
     return {
         name: &#39;John&#39;,
     }
  },
  methods: {
      changeName() {
          this.name = &#39;Lily&#39;
          EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
      }
    }
}
</script>

在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数

import { EventBus } from "../EventBus.js"

export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {
             this.name = name
         })
    }
}

这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。

3. 使用 vuex →点这里

四、多层父子组件通信

有时需要实现通信的两个组件不是直接的父子组件，而是祖父和孙子，或者是跨越了更多层级的父子组件，这种时候就不可能由子组件一级一级的向上传递参数，特别是在组件层级比较深，嵌套比较多的情况下，需要传递的事件和属性较多，会导致代码很混乱。

这时就需要用到 vue 提供的更高阶的方法：provide/inject。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。查 看 官 网

provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。

父组件：

export default {
  provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
    name: 'Jack'
  }
}

子组件：

export default {
  inject: ['name'], // 注入了从父组件中提供的name变量
  mounted () {
    console.log(this.name);  // Jack
  }
}

注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。

如果想要实现 provide 和 inject 数据响应，有两种方法：

• provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在后代组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods

// 父组件　
<div>
      <button @click="changeName">修改姓名</button>
      <child-b />
</div>
<script>
    ......
    data() {
        return {
            name: "Jack"
        };
    },
    provide() {
        return {
            parentObj: this //提供祖先组件的实例
        };
    },
    methods: {
        changeName() {
            this.name = &#39;Lily&#39;
        }
    }
</script>

后代组件中取值：　　

<template>
　　<div class="border2">
　　　　<P>姓名：{{parentObj.name}}</P>
　　</div>
</template>
<script>
　　export default {
　　　　inject: {
　　　　　　parentObj: {
　　　　　　　　default: () => ({})
　　　　　　}
　　　　} // 或者inject: [&#39;parentObj&#39;]
　　};
</script>

注：这种方式在函数式组件中用的比较多。函数式组件，即无状态(没有响应式数据)，无实例化(没有 this 上下文)，内部也没有任何生命周期处理方法，所以渲染性能高，比较适合依赖外部数据传递而变化的组件。

• 使用 Vue.observable 优化响应式 provide，这个我用的不熟就不说了，可以 → 官方文档

 总结

• 父子通信：父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children 通信；$ref 也可以访问组件实例；provide / inject ；

• 兄弟通信： EventBus；Vuex；

• 跨级通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；

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

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Übergeben von Werten in Vue-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!