Wie übertrage ich Werte zwischen vue2.0-Komponenten? Eine kurze Analyse der Komponentenübertragungsmethoden

vueWie übertrage ich Werte zwischen Komponenten? Der folgende Artikel stellt Ihnen die Komponentenübertragungsmethode in vue2.0 vor. Ich hoffe, er wird Ihnen hilfreich sein!

Komponentenbasierte Entwicklung ist eine wichtige Entwicklungsmethode in VUE. Wenn jede Komponente separat entwickelt wird, entsteht zwangsläufig ein Problem der Wertübertragung zwischen Komponenten. (Teilen von Lernvideos: vuejs-Video-Tutorial)

props-Übergabe von Prop-Werten

props-Übergabe von Werten ist die häufigste Methode, um Werte zwischen übergeordneten und untergeordneten Komponenten zu übergeben, wenn auf untergeordnete Komponenten verwiesen wird. Fügen Sie die Daten, die Sie übertragen möchten, zur Unterkomponente hinzu und rufen Sie die Daten über Requisiten ab, um eine Wertübergabe zu erreichen. props传值是父子组件之间传值最常见的方式，在引用子组件的时候，加入想要传输给子组件的数据并通过props进行数据获取实现传值。

Parent.vue
<child :child-data = "childData"></child>

Child.vue
export default {
    // 数组写法
    props: ["child-data"];
    
    // 对象写法
    props: {
        child-data: {
            type: String,
            require: true, // 是否必须
            default: "默认值", // 设置默认值
            validator(val) {
                return true;
            }, // 设置值的 验证 ，验证该值是否符合（true）
        }
    }
}

当我们使用了props完成了父组件将数据传给子组件，这种情况下，子组件从父组件中获取到的数据并不能够对数据进行更改，必须要使用$emit才能对传输的值进行修改。

$emit传值修改prop

props与$emit联合使用，才能实现父子组件之间的传值，也就是通过子组件$emit处理父组件的事件来实现子组件对父组件中的数据进行修改并传值给父组件。

Parent.vue
<child :child-data = "childData" @change-child="changeChild"></child>
methods: {
    changeChild(val) {
        console.log(val); // 子组件传递过来的更改了的新值
        this.childData = val;
    }
}

Child.vue
methods: {
    handleChildData() {
        this.$emit("change-child", new-child-data);
    }
}

不仅是props，还可以通过model语法糖实现父子组件之间的传值，而且这样的传值方式特别的繁琐，会造成很多不便。

v-model传prop值

model可以将value替代具体的值与$emit完成父子组件之间的传值，写法略有不同。

Parent.vue
<child v-model = "childData"></child>

Child.vue
export default {
    props: ["value"], // value
    methods: {
        handleChildData() {
            this.$emit("input", new-child-data);
        }
    }
}

也可以通过定义model（不需要使用props获取数据）来进行传值。

Parent.vue
<child v-model = "childData"></child>

Child.vue
export default {
    model: {
        prop: "child-data", // 重新取名
        event: "change-child-data",
    },
    methods: {
        handleChildData() {
            this.$emit("change-child-data", new-child-data);
        }
    }
}

然而v-model只能处理一个prop，如果我们要处理多个prop的话，就不能够使用了。

.sync实现多prop传值

Parent.vue
<child :child-data.sync = "childData"></child>

Child.vue
export default {
    props: ["child-data"],
    methods: {
        handleChildData() {
            this.$emit("update:child-data", new-child-data);
        }
    }
}

不过，在VUE3中，sync将不需要再使用，v-model将会支持多个prop传值。

除了使用prop传值，还可以通过ref指向组件获取子组件中的属性或者方法。

ref 子组件调用

通过ref指向组件，可以通过调用组件中的属性或者方法进行获取。

Parent.vue
<child ref="child"></child>
export default {
    mounted() {
        const child = this.$refs.child;
        console.log(child.childData);
        child.handleChild("handle-child-data");
    }
}

Child.vue
export default {
    data() {
        return {
            childData: "child-data",
        }
    },
    methods: {
        handleChild(val) {
            console.log(val);
        }
    }
}

不仅仅是可以通过ref来实现子组件数据获取，还可以通过 children&parent 来传递父子组件中的数据。

$children & $parent

$children可以获取到一个父组件的所有子组件的数组，可以通过其获取到想要操作的子组件中的属性或者方法。

$parent可以获取到父组件（对象），对其进行调用。

Parent.vue
this.$children[0].handleChild("change-child[0]-data");

Child.vue
this.$parent.handleParent("change-parent-data");

但是前几种方法（prop & ref）只能实现父子组件之间的传值，并不能完成父组件与具有多层嵌套关系组件之间的传值，如果真要实现的话，将会很麻烦，会造成代码冗余、可复用性极低。

我们可以通过别的方法（attrs&listeners 、 provide&inject 、 eventBus）来实现多层嵌套组件与父组件之间的传值。

$attrs & $listeners

$attrs包含了父组件中传入孙子组件的数据（除了prop已传递的属性、class、style）。通过v-bind="$attrs可以传入孙子组件中。

$listeners包含了父组件中的所有v-on事件（除了包含.native修饰器的）。通过v-on="$listeners将父组件中的方法传给孙子组件。

<sun-child v-bind="$attrs" v-on="$listeners"></sun-child>

provide & inject

provide可以给后代组件提供需要的数据或者方法（不管是嵌套多少层的组件）。

inject

Parent.vue
provide() {
    return {
        parent-data: "parent-data",
        handleParent: this.handleParent,
    }
},
methods: {
    handleParent() {},
}

Sun-Child.vue
inject: ["parent-data", handleParent"],

Wenn wir props verwenden, um die Übergabe von Daten an die untergeordnete Komponente durch die übergeordnete Komponente zu vervollständigen, können in diesem Fall die von der untergeordneten Komponente von der übergeordneten Komponente erhaltenen Daten nicht „die Daten ändern“, sondern Sie müssen Verwenden Sie $emit, um den übertragenen Wert zu ändern. 🎜

🎜$emit übergibt einen Wert, um prop zu ändern🎜🎜🎜props und $emit können zusammen verwendet werden, um die Beziehung zu realisieren zwischen übergeordneten und untergeordneten Komponenten. Wertübergabe bedeutet, dass die Unterkomponente $emit das Ereignis der übergeordneten Komponente verarbeitet, sodass die Unterkomponente die Daten in der übergeordneten Komponente ändern und den Wert an übergeben kann übergeordnete Komponente. 🎜

// 以按需引入的情况为例
import Bus from 'Bus.js'

Bus.$emit("handleBus", "自定义事件"); // 向外部传递数据

Bus.$on("handleBus", data => {}); // 触发事件，获取数据

Bus.$off("handleBus"); // 取消对自定义事件的监听

🎜Nicht nur props, sondern auch durch Modellsyntaxzucker, um eine Wertübertragung zwischen übergeordneten und untergeordneten Komponenten zu erreichen. Eine solche Wertübertragungsmethode ist besonders umständlich und führt zu a viele Unannehmlichkeiten. 🎜

🎜v-model übergibt den Prop-Wert🎜🎜🎜model kann den spezifischen Wert durch $ emit ersetzen und schließt die Wertübertragung ab zwischen übergeordneten und untergeordneten Komponenten, und die Schreibmethode unterscheidet sich geringfügig. 🎜rrreee🎜Sie können Werte auch übergeben, indem Sie model definieren (ohne props zum Abrufen von Daten zu verwenden). 🎜rrreee🎜Allerdings kann v-model nur ein prop verarbeiten. Wenn wir mehrere prop verarbeiten möchten, kann es nicht verwendet werden. 🎜

🎜.sync implementiert die Multi-Prop-Wertübertragung🎜🎜rrreee

🎜Allerdings wird sync in VUE3 nicht mehr verwendet, v-model unterstützt mehrere prop-Werte. 🎜

🎜Zusätzlich zur Verwendung von prop zum Übergeben von Werten können Sie auch ref verwenden, um auf die Komponente zu verweisen, um die Eigenschaften oder Methoden in der Unterkomponente abzurufen. 🎜

🎜ref-Unterkomponentenaufruf 🎜🎜🎜 zeigt über ref auf die Komponente, die durch Aufrufen der Eigenschaften oder Methoden in der Komponente abgerufen werden kann. 🎜rrreee🎜Sie können Unterkomponentendaten nicht nur über ref erhalten, sondern auch über 🎜children&parent🎜, um die Daten im zu übergeben Eltern-Kind-Komponente. 🎜

🎜$children & $parent🎜🎜🎜$children können einen Elternteil bekommen Array aller Unterkomponenten einer Komponente, über das Sie die Eigenschaften oder Methoden in den Unterkomponenten erhalten können, die Sie bedienen möchten. 🎜🎜$parent kann die übergeordnete Komponente (Objekt) abrufen und aufrufen. 🎜rrreee🎜Aber die ersten paar Methoden (🎜prop & ref🎜) können nur die Wertübertragung zwischen übergeordneten und untergeordneten Komponenten realisieren und können die Wertübertragung zwischen übergeordneten Komponenten und Komponenten mit mehrschichtigen verschachtelten Beziehungen nicht abschließen, wenn dies wirklich erforderlich ist Die Implementierung wird sehr mühsam sein und zu Code-Redundanz und extrem geringer Wiederverwendbarkeit führen. 🎜🎜Wir können andere Methoden verwenden (🎜attrs&listeners , Provide&inject , eventBus🎜), um die Wertübertragung zwischen mehrschichtigen verschachtelten Komponenten und übergeordneten Komponenten zu realisieren. 🎜

🎜$attrs & $listeners🎜🎜🎜$attrs ist im übergeordneten Element enthalten Komponente Die an die Enkelkomponente übergebenen Daten (außer prop übergebene Eigenschaften, class, style). v-bind="$attrs kann an die Enkelkomponente übergeben werden. 🎜🎜$listeners enthält alle v-on-Ereignisse in der übergeordneten Komponente (außer denen, die den .native-Dekorator enthalten). Übergeben Sie Methoden in der übergeordneten Komponente über v-on="$listeners". 🎜rrreee

🎜provide & inject🎜🎜🎜provide kann erforderliche Daten oder Methoden für untergeordnete Komponenten bereitstellen (unabhängig von der Anzahl der Ebenen verschachtelter Komponenten). 🎜🎜inject kann die in jeder übergeordneten Komponente bereitgestellten Daten oder Methoden abrufen und direkt verwenden. 🎜

Parent.vue
provide() {
    return {
        parent-data: "parent-data",
        handleParent: this.handleParent,
    }
},
methods: {
    handleParent() {},
}

Sun-Child.vue
inject: ["parent-data", handleParent"],

但是provide & inject是不可控的，因为这个里面传递的数据并不是响应式的（其中一个数据改变，并不会影响另外的），当某个嵌套组件使用某个传输的值的时候并不能追溯到是哪个父组件，所以，这种方式并不是特别可取。

eventBus 中央事件总线

eventBus，顾名思义，中央事件总线，可以通过其实现各个层套的组件之间的传值，包括兄弟组件。

我们可以通过将其抽离出来成一个单独的js文件（Bus.js），挂载到全局（Vue.prototype.$bus）或者按需引入，又或者是存入到根对象的data上。

// 以按需引入的情况为例
import Bus from 'Bus.js'

Bus.$emit("handleBus", "自定义事件"); // 向外部传递数据

Bus.$on("handleBus", data => {}); // 触发事件，获取数据

Bus.$off("handleBus"); // 取消对自定义事件的监听

但是这些方法也只是适用于小范围内的数据使用较少的组件中，需要传递的数据过多的话，维护会很麻烦，且可复用性也极低。当数据传递量大的时候，建议使用vuex状态管理器（常用）。

Tips

其实也可以通过插槽进行父子组件的值传递，不过插槽的作用不止如此，但是如果有遇到使用插槽更方便的情况的时候可以使用插槽slot。

【相关视频教程推荐：web前端】

Das obige ist der detaillierte Inhalt vonWie übertrage ich Werte zwischen vue2.0-Komponenten? Eine kurze Analyse der Komponentenübertragungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!