Maison > Article > interface Web > Comment transférer des valeurs entre les composants vue2.0 ? Une brève analyse des méthodes de transmission des composants
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 !
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
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) } } }
当我们使用了props
完成了父组件将数据传给子组件,这种情况下,子组件从父组件中获取到的数据并不能够对数据进行更改,必须要使用$emit
才能对传输的值进行修改。
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语法糖
实现父子组件之间的传值,而且这样的传值方式特别的繁琐,会造成很多不便。
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
的话,就不能够使用了。
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
指向组件,可以通过调用组件中的属性或者方法进行获取。
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
Parent.vue provide() { return { parent-data: "parent-data", handleParent: this.handleParent, } }, methods: { handleParent() {}, } Sun-Child.vue inject: ["parent-data", handleParent"],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. 🎜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"); // 取消对自定义事件的监听🎜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. 🎜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é. 🎜🎜Cependant, dans VUE3,🎜En plus d'utilisersync
ne sera plus utilisé,v-model
prendra en charge plusieurs valeursprop
. 🎜
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. 🎜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
. 🎜rrreeeprovide
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"],
但是provide & inject
是不可控的,因为这个里面传递的数据并不是响应式的(其中一个数据改变,并不会影响另外的),当某个嵌套组件使用某个传输的值的时候并不能追溯到是哪个父组件,所以,这种方式并不是特别可取。
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前端】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!