Maison > Article > interface Web > Quelles sont les cinq façons de transmettre des valeurs dans les composants vue brother ?
Les cinq méthodes sont : 1. Le composant parent transmet la valeur au composant enfant ; 2. Le composant enfant transmet la valeur au composant parent ; 3. Définir un événement personnalisé sur l'étiquette dans le composant parent ; et obtenez-le dans les paramètres ; 4. Déclenchez des événements personnalisés dans les sous-composants et transmettez les paramètres. 5. Transmettez les paramètres via le composant public Bus.js.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
Cinq façons de transmettre des valeurs dans les composants vue :
1. Les composants parents transmettent des valeurs aux sous-composants :
Liez les données parent aux sous-composants et les sous-composants transmettent des accessoires. accepter les paramètres.
Ensuite, nous utilisons un exemple pour illustrer comment le composant parent transfère les valeursau composant enfant : comment obtenir les données du composant parent App.vue dans le composant enfant Users.vue utilisateurs :[ "Henry","Bucky" ,"Emily"]
//App.vue父组件 <template> <div id="app"> <users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名 </div> </template> <script> import Users from "./components/Users" export default { name: 'App', data(){ return{ users:["Henry","Bucky","Emily"] } }, components:{ "users":Users } }
//users子组件 <template> <div class="hello"> <ul> <li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面 </ul> </div> </template> <script> export default { name: 'HelloWorld', props:{ users:{ //这个就是父组件中子标签自定义名字 type:Array, required:true } } } </script>
2. Le composant enfant transmet la valeur au composant parent :
Définissez les données à transférer dans le composant parent 『data. (){ id: value}』
Ensuite, utilisons un exemple pour illustrer comment un composant enfant transmet une valeur à un composant parent : lorsque nous cliquons sur « Vue.js Demo », le composant enfant transmet une valeur au composant parent, et le texte change par rapport à l'original « Une valeur est transmise ». Il devient « l'enfant transmet la valeur au composant parent » pour réaliser le transfert de valeur du composant enfant au composant parent.
// 子组件 <template> <header> <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件 </header> </template> <script> export default { name: 'app-header', data() { return { title:"Vue.js Demo" } }, methods:{ changeTitle() { this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值” } } } </script>rrree
3. Définissez un événement personnalisé sur l'étiquette dans le composant parent et récupérez les paramètres à l'intérieur de l'événement
4. événement de composant et paramètres de passe. (this.$émetteur('Événement personnalisé dans le composant parent', paramètres))
5. Transmettez les paramètres via le composant public Bus.js
[Recommandations associées : "vue. js tutoriel》】
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!