Comment transférer des valeurs entre les composants vue2.0 ? Une brève analyse des méthodes de transmission des composants-Voir.js-php.cn

vueComment transférer des valeurs entre composants ? L'article suivant vous présentera la méthode de transmission de composants dans vue2.0. J'espère qu'il vous sera utile !

Comment transférer des valeurs entre les composants vue2.0 ? Une brève analyse des méthodes de transmission des composants

Le développement basé sur les composants est une méthode de développement importante dans VUE Lorsque chaque composant est développé séparément, il y aura inévitablement un problème de transfert de valeur entre les composants. (Partage vidéo d'apprentissage : tutoriel vidéo vuejs)

props transmettant la valeur de la prop

props la transmission de la valeur est le moyen le plus courant de transmettre une valeur entre les composants parents et enfants. Ajoutez les données que vous souhaitez transmettre au sous-composant et obtenez les données via des accessoires pour réaliser la transmission de valeur. 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）
        }
    }
}

Copier après la connexion

当我们使用了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);
    }
}

Copier après la connexion

不仅是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);
        }
    }
}

Copier après la connexion

也可以通过定义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);
        }
    }
}

Copier après la connexion

然而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);
        }
    }
}

Copier après la connexion

不过，在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);
        }
    }
}

Copier après la connexion

不仅仅是可以通过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");

Copier après la connexion

但是前几种方法（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>

Copier après la connexion

provide & inject

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

inject

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

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

Copier après la connexion

Lorsque nous utilisons props pour compléter le composant parent en transmettant des données au composant enfant, dans ce cas, les données obtenues par le composant enfant à partir du composant parent ne peuvent pas 🎜modifier les données🎜, vous devez utilisez $emit pour modifier la valeur transmise. 🎜

🎜$emit transmet la valeur pour modifier prop🎜🎜🎜props et $emit peuvent être utilisés ensemble pour réaliser la relation entre les composants parent et enfant Le passage par valeur signifie que le sous-composant $emit gère l'événement du composant parent afin que le sous-composant puisse modifier les données du composant parent et transmettre la valeur au composant parent. composant parent. 🎜

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

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

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

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

Copier après la connexion

🎜Non seulement les props, mais aussi via le sucre de syntaxe du modèle pour réaliser un transfert de valeur entre les composants parents et enfants, et une telle méthode de transfert de valeur est particulièrement lourde et entraînera un beaucoup de désagréments. 🎜

🎜v-model transmet la valeur de la prop🎜🎜🎜`model` peut remplacer la valeur spécifique par `$ submit` termine le transfert de valeur entre les composants parent et enfant, et la méthode d'écriture est légèrement différente. 🎜rrreee🎜Vous pouvez également transmettre des valeurs en définissant `model` (sans utiliser `props` pour obtenir des données). 🎜rrreee🎜Cependant, `v-model` ne peut gérer qu'un seul `prop`. Si nous voulons gérer plusieurs `prop`, il ne peut pas être utilisé. 🎜

🎜.sync implémente le transfert de valeur multi-prop🎜🎜rrreee
🎜Cependant, dans VUE3, `sync` ne sera plus utilisé, `v-model` prendra en charge plusieurs valeurs `prop`. 🎜
🎜En plus d'utiliser `prop` pour transmettre des valeurs, vous pouvez également utiliser `ref` pour pointer vers le composant afin d'obtenir les propriétés ou les méthodes du sous-composant. 🎜

🎜appel du sous-composant ref 🎜🎜🎜 pointe vers le composant via `ref`, qui peut être obtenu en appelant les propriétés ou les méthodes du composant. 🎜rrreee🎜Non seulement vous pouvez obtenir des données de sous-composants via `ref`, mais vous pouvez également les obtenir via 🎜 $enfants&$ parent🎜 pour transmettre les données dans le composante parent-enfant. 🎜

🎜`$children` & `$parent`🎜🎜🎜`$children` peuvent obtenir un parent An tableau de tous les sous-composants d'un composant, à travers lequel vous pouvez obtenir les propriétés ou les méthodes des sous-composants que vous souhaitez utiliser. 🎜🎜`$parent` peut récupérer le composant parent (objet) et l'appeler. 🎜rrreee🎜Mais les premières méthodes (🎜prop & ref🎜) ne peuvent réaliser le transfert de valeur qu'entre les composants parent et enfant, et ne peuvent pas compléter le transfert de valeur entre les composants parents et les composants avec des relations imbriquées multicouches si cela est vraiment nécessaire. à mettre en œuvre, sera très difficile et entraînera une redondance du code et une réutilisabilité extrêmement faible. 🎜🎜Nous pouvons utiliser d'autres méthodes (🎜 $attrs&$ listeners , provide&inject , eventBus🎜) pour réaliser un transfert de valeur entre les composants imbriqués multicouches et les composants parents. 🎜

🎜`$attrs` & `$listeners`🎜🎜🎜`$attrs` est inclus dans le parent composant Données transmises au composant petit-enfant (sauf les propriétés transmises par `prop`, `class`, `style`). `v-bind="$attrs` peut être transmis au composant petit-enfant. 🎜🎜`$listeners` contient tous les `v-on` dans les événements du composant parent. (sauf ceux contenant le décorateur `.native`). Transmettez les méthodes du composant parent au composant petit-enfant via `v-on="$listeners`. 🎜rrreee

🎜provide & inject🎜🎜🎜provide peut fournir les données ou méthodes requises aux composants descendants (quel que soit le nombre de couches de composants imbriqués). 🎜🎜inject peut obtenir les données ou méthodes fournies dans n'importe quel composant parent et les utiliser directement. 🎜

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

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

Copier après la connexion

但是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"); // 取消对自定义事件的监听

Copier après la connexion

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