Comment transférer des valeurs entre composants dans vue3

Composant Vue3 transmettant la valeur (accessoires)

Composant parent transmettant la valeur au composant enfant

Dans le composant parent :

1 .Introduire ref

2 Définir les attributs et les valeurs d'attribut à transmettre

. # 🎜🎜#3. Passer cet attribut au sous-composant dans la page vue :Le nom passé au composant enfant (personnalisé) = "correspondant au nom de l'attribut défini dans le composant parent"

Dans le composant enfant :

4. Recevoir les attributs transmis par le composant parent

props: {
 showDialogVisible: Boolean
},
setup() {
 return {
 }
}

5. Enregistrez le composant

setup(props) {
    // 可以打印查看一下props传过来的属性以及属性的值
	console.log(props);
	
	return {
		props
	}
}

6. . Utilisez cet attribut sur la page du composant enfant

#🎜🎜 #

La transmission de la valeur du composant parent au composant enfant est terminée !

Le composant enfant transmet la valeur au composant parent (régulier)

Dans le composant enfant : #🎜🎜 #

Puisque le transfert de données vue est

flux de données unidirectionnel

, le composant enfant n'a pas le droit de modifier les données transmises par le composant parent, et ne peut demander qu'au composant parent de modifier l'original. Pour modifier les données, utilisez émettre pour notifier au composant parent de les modifier.

• 1. Définissez la valeur de la propriété (ou méthode) du composant parent que vous souhaitez modifier dans le composant enfant

  setup(props,context) {
      context.emit('setShow', false);
  	
  	return {
  	}
  }
  //也可以：es6解构赋值取到emit
  //setup(props,{emit}) {
  //    emit('setShow', false);
  //	
  //	return {
  //	}
  //}

  context.emit( ‘Passer dans le composant parent Nom de l'attribut personnalisé’, valeur de l'attribut);

Dans le composant parent :

# 🎜🎜## 🎜🎜#

2 Recevez le nom de l'attribut personnalisé transmis dans le sous-composant de la page et liez-le à son attribut (méthode) correspondant

#. 🎜🎜#

Le passage de la valeur du composant parent au composant enfant est terminé !

• Joindre la méthode de mon composant parent :

Le composant enfant transmet la valeur au composant parent (v-model)# 🎜 🎜#

Si la valeur

transmise par le composant enfant

au composant parent est exactement la valeur transmise par le composant parent

au composant enfant , vous peut effectuer directement des opérations bidirectionnelles sur cet attribut Binding.

Remarque : Il est recommandé de lire la première section avant de lire cette section : Le composant parent transmet la valeur au composant enfant

#🎜 🎜#

Sur le sous-composant :

1. Modifiez directement les attributs obtenus à partir des accessoires#🎜🎜. #

Sur le composant parent :

• 2 .Liez le composant enfant dans la page parent

La valeur est passée !

Transfert de valeur de composant Vue3 et traitement des événements

J'ai également recherché des informations sur Internet avant cet article et j'ai découvert qu'il y avait très peu d'informations, je vais donc les enregistrer moi-même#🎜 🎜#
• L'exigence du projet est que chaque page doit ajouter une barre de navigation supérieure et un événement de retour

Écrivez d'abord le code du sous-composant, dans les composants Créez un fichier nav.vue dans le répertoire :

Contenu du fichier nav.vue du sous-composant

<template>
   <div>
    <el-affix position="top" :offset="0">
        <div class="nav">
          <span @click="backGo"><img  src="../assets/back.png"/ alt="Comment transférer des valeurs entre composants dans vue3" >返回</span>
          <p>{{title}}</p>
        </div>
    </el-affix>
  </div>
</template>
<script setup>
import{ defineProps } from "vue"
const props =defineProps({ //子组件定义接收父组件传过来的值
       title:String 
})
//点击返回事件
const backGo = () => {
    history.back()
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>

Composant parent fichier aboutus.vue : # 🎜🎜#

<template>
  <div class="wrap">
      <Nav title="关于我们"></Nav> <!--记住这里第一个字母大写哦-->
        <div class="lists">
          <ul class="abus">
              <li><p><router-link to="/company">公司介绍</router-link></p></li>
              <li><p><router-link to="/privacy">隐私政策</router-link></p></li>
              <li><p><router-link to="/useragree">用户协议</router-link></p></li>
          </ul>
      </div>
  </div>
</template>
<script setup>
import Nav from &#39;@/components/nav.vue&#39; 
 
</script>

Remarque Lors de l'introduction de sous-composants, mettez la première lettre en majuscule !

N'est-ce pas très simple !

Ce qui suit présente le transfert de valeur du sous-composant

La même chose est faite avec le sous-composant nav.vue pour tester, entrez directement le code :

<template>
    <div>
    <el-affix position="top" :offset="0">
    <div class="nav">
      <span @click="backGo"><img  src="../assets/back.png"/ alt="Comment transférer des valeurs entre composants dans vue3" >返回</span>
      <p>{{title}}</p>
    </div>
  </el-affix>
    </div>
</template>
<script setup>
import{ defineProps ,defineEmits} from "vue"
const emits =defineEmits([&#39;getBackGo&#39;]) //注册父组件回调方法
const props =defineProps({
       title:String
})
const backGo = () => {
    // history.back()
    emits("getBackGo","传个值给父组件！")
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>

Regardons le parent La méthode d'écriture du composant aboutus.vue :

<template>
  <div class="wrap">
      <Nav title="关于我们" @getBackGo="getBackGoInfo"></Nav>
      <img  src="../../assets/logo.jpg" class="logo"/ alt="Comment transférer des valeurs entre composants dans vue3" >
      <div class="lists">
          <ul class="abus">
              <li><p><router-link to="/company">公司介绍</router-link></p></li>
              <li><p><router-link to="/privacy">隐私政策</router-link></p></li>
              <li><p><router-link to="/useragree">用户协议</router-link></p></li>
          </ul>
      </div>
  </div>
</template>
<script setup>
import Nav from &#39;@/components/nav.vue&#39;
const getBackGoInfo = (value) => {
    console.log(value)
}
 
</script>

L'effet est le suivant :

#🎜🎜 #

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!