Maison > Article > interface Web > Quelles sont les cinq façons de transmettre des valeurs dans les composants vue ?
Quelles sont les cinq façons de transmettre des valeurs dans les composants vue ?
- 青灯夜游original
- 2021-10-27 16:16:2556348parcourir
Cinq façons de transmettre des valeurs dans les composants vue : 1. Le composant parent transmet la valeur au composant enfant ; 2. Le composant enfant transmet la valeur au composant parent 3. Les paramètres sont transmis entre les composants frères adjacents ; paramètres ; 5. Transmettez les paramètres via EventBus.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
La méthode de communication de Vue peut également être considérée comme la méthode de transmission de paramètres :
Le composant parent transmet la valeur au composant enfant :
Le composant enfant transmet la valeur au composant parent :
-
Composants frères et sœurs adjacents Passage des paramètres entre frères (frères)
Passage des paramètres de frères éloignés (cousins)
EventBus passage des paramètres
1. Passage des paramètres de père en fils
Principe : Les contrôles parentaux l'enfant via les accessoires de l'attribut du composant enfant, lance l'attribut d'étiquette personnalisé du composant enfant pour recevoir l'état de fonctionnement du composant parent
Exemple : un bouton dans le parent contrôle l'affichage et le masquage d'un p dans le composant enfant
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>
<body>
<!-- 这里的app范围就是 子组件son 的父级 -->
<div id="app">
<button @click='change'>父按钮</button>
<hr>
<!-- ********** 自定义标签属性test,接收父级的state ************-->
<son :test='state'></son>
</div>
<template id="tp1">
<div>
<!-- ************ 调用自定义属性test **************-->
<div v-show='test'>我是子组件的div</div>
</div>
</template>
<script src="../vue/vue.js"></script>
<script>
// 局部定义 子组件son
new Vue({
el:"#app",
data:{
state:true
},
methods:{
change(){
this.state = !this.state;
}
},
components:{
son:{
template:"#tp1",
//*********** 抛出自定义标签属性 ***************
props:['test']
}
}
})
</script>
</body>
</html>Effet :
2. Le principe de transmission des paramètres du parent à l'enfant
: L'enfant contrôle le parent, et le composant enfant lie des événements personnalisés pour traiter les fonctions de méthode du composant parent et déclenche sa propre personnalisation via . $emit('custom event', [parameter]) Événement
Exemple : Un bouton dans un composant enfant contrôle l'affichage et le masquage d'un p dans le composant parent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>
<body>
<div id="app">
<c1></c1>
</div>
<!-- 父组件c1 子组件c2 子组件自定义事件test-->
<template id="c1">
<div>
<div v-show='state'>father显示/隐藏</div>
<hr>
<!--************ 子组件c2自定义事件,执行父组件c1的方法函数change_f ***************** -->
<c2 @test='change_f'></c2>
</div>
</template>
<template id="c2">
<div>
<button @click='change_son'>子按钮</button>
</div>
</template>
<!-- 引入Vue.js框架文档，可在官方文档下载-->
<script src='../vue/vue.js'></script>
<script>
//全局定义
// 实例化 父组件c1
Vue.component("c1",{
template:"#c1",
data(){
return {
state:true
}
},
methods:{
change_f(){
this.state = !this.state;
}
}
})
// 实例化 子组件c2
Vue.component("c2",{
template:"#c2",
methods:{
change_son(){
// ************ 在子组件方法里，触发子组件自定义事件 ******************
this.$emit("test")
}
}
})
//实例化一个Vue对象
new Vue({
el:"#app"
})
</script>
</body>
</html>Effet :
3. Passage des paramètres des frères adjacents (frères)
Principe : via un parent public L'élément sert de pont (composant d'instance), combiné au transfert de paramètres d'accessoires parent-enfant et aux événements personnalisés enfant-parent
Exemple : c1 et c2 sont des relations frères que c1 peut contrôler. l'affichage et le masquage d'éléments dans c2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>
<body>
<div id="app">
父级状态
<p>{{state}}</p>
<hr>
<c1 @test_c1='change_f'></c1>
<hr>
<c2 :test_c2='state'></c2>
</div>
<template id="c1">
<div>这里是c1组件
<button @click='change_c1'>c1按钮</button>
</div>
</template>
<template id="c2">
<div>这里是c2组件,状态：{{test_c2}}
<div v-show='test_c2'>我是c2中的div</div>
</div>
</template>
<script src='../vue/vue.js'></script>
<script>
Vue.component("c2",{
template:"#c2",
props:['test_c2']
})
Vue.component("c1",{
template:"#c1",
methods:{
change_c1(){
this.$emit("test_c1")
}
}
})
new Vue({
el:"#app",
data:{
state:true
},
methods:{
change_f(){
this.state = !this.state;
}
}
})
</script>
</body>
</html>Effet :
4. Passage des paramètres de frères éloignés (cousins)
Principe : En créant une instance intermédiaire, en enregistrant un événement, dans le composant contrôlé, la fonction à être exécuté est effectué tout au long de l'événement, et dans le composant de contrôle principal, l'opération correspondante est modifiée tout au long de l'événement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
这是父组件
<hr>
<son1></son1>
<hr>
<son2></son2>
</div>
</template>
<template id="son1">
<div>
{{name}}
<button @click='click_son1'>触发angle中间事件</button>
</div>
</template>
<template id="son2">
<div>
{{name}}
</div>
</template>
<script src='../vue/vue.js'></script>
<script>
//********** 创建一个angle实例，作为中间变量(全局) **************
let angel = new Vue();
new Vue({
el:"#app",
components:{
father:{
template:"#father",
components:{
son1:{
template:"#son1",
data(){
return {
name:"我是son1"
}
},
methods:{
click_son1(){
// *************** 通过angel注册的test事件，修改son2中name的值 ************
angel.$emit('test','哈哈！修改成功！')
}
}
},
son2:{
template:"#son2",
data(){
return {
name:"我是son2"
}
},
methods:{
change(val){
this.name = val;
}
},
//生命周期，自动执行，组件准备ok就可用
mounted(){
// *************** 通过angel注册的test事件，将son1的修改方法传过去 ************
angel.$on('test',this.change)
}
}
}
}
}
})
</script>
</body>
</html>Effet :
Avant de cliquer :
Après avoir cliqué :
5. EventBus transmettant les paramètres
1. Montez Global EventBus dans main.js
Vue.prototype.$EventBus = new Vue()
2. Un composant
<template>
<div class="wrap">
<div>我是组件A</div>
<button @click="sendMsg">发送</button>
</div>
</template>
<script>
export default {
name: "A",
methods:{
sendMsg(){
this.$EventBus.$emit('sendMsg',"这是组件A发送的消息！")
}
}
}
</script>3.B composant
<template>
<div>
<div>我是组件B</div>
</div>
</template>
<script>
export default {
name: "B",
mounted(){
this.$EventBus.$on('sendMsg',(msg)=>{
console.log(msg);//这是组件A发送的消息！
})
},
}
</script>transmet les paramètres en montant l'objet Vue global.
Recommandations associées : "Tutoriel vue.js"
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!
Articles Liés
Voir plus- Parlons de la façon de créer une application SPA monopage avec Laravel8+Vuejs
- Comment le composant parent vue appelle-t-il la méthode du composant enfant ?
- Comment implémenter le saut de route et le passage de valeur dans vuejs
- Une brève discussion sur la façon de configurer et d'utiliser les modèles de code .vue dans vscode
- Quelles sont les méthodes de saut de routage Vue ?
- Quels sont les outils de développement de vue ?