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 valeurs​​au 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: &#39;App&#39;,
  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: &#39;HelloWorld&#39;,
  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 id="title">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: &#39;app-header&#39;,
  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!