Comment transmettre des valeurs entre les composants vue

Cette fois, je vais vous présenter la méthode de transfert de valeur entre les composants vue, et quelles sont les précautions pour le transfert de valeur entre les composants vue. Ce qui suit est un cas pratique. . Jetons un coup d'oeil.

Pour nous, en front-end, l'écriture de l'interface n'est pas le plus gros problème. Dans de nombreux cas, ce sur quoi nous devons nous concentrer, ce sont les données, comme le transfert de données sur les pages js, etc. Nous devons également apprendre. vue Savoir utiliser les données

Bien sûr, il est possible d'utiliser le stockage, mais la mise en cache n'est pas nécessaire. Bien sûr, il est recommandé dans Vue d'utiliser vuex pour l'interaction des données. Vuex rendra votre code Vue flexible et contrôlable et stockera les données de manière uniforme dans l'état. . Les modifications de mutations ne peuvent être déclenchées que via des actions. Cependant, parfois nos projets ne sont pas assez complexes pour nécessiter Vuex. , (Nous ne discuterons pas du vm.$dispatch aboli) Dans de nombreux cas, nous devons capturer un événement. À ce stade, nous pouvons utiliser le bus d'événements de vue

. La méthode pour utiliser eventbus est très simple. Nous devons suivre trois étapes. La première étape consiste à créer un conteneur qui fera office de notre eventbus

. Dans la deuxième étape, nous devons lancer ou soumettre notre événement

La troisième étape consiste à surveiller notre événement (c'est peut-être la deuxième partie)

Tout d’abord, nous devons définir notre eventbus globalement

Ici, nous définissons eventbus. Cela termine simplement notre première étape. Bien sûr, les variables globales, je pense que vous devriez savoir où elles sont définies

. Ensuite, nous lançons d'abord cet événement et utilisons ￥. émettre pour "Soumettre"

Quoi qu'il en soit, cela est compréhensible. Ensuite, nous passons par la troisième étape pour surveiller

certainement. Déjà surveillé ici. L'événement clic n'est qu'un fardeau,

Ensuite, nous devons les utiliser dans l'interface

Tout d’abord, importez les fichiers dont nous avons besoin :

Ici j'utilise deux fichiers : transimissionone et transimissiontwo '

Vient ensuite la définition

La seconde est d'utiliser

Enfin, lancez notre projet et vérifiez l'effet

Ceci est principalement destiné à tout le monde, donc le code est capturé ci-dessous, principalement quatre fichiers

transitone. vue (fichier qui envoie les événements)

<template> 
  <p class="transimission1"> 
  <button @click="get">点击发送数值到eventbus中</button>  
  </p> 
   
</template> 
 
<script> 
  export default { 
    name: "transimission1", 
    methods: { 
      get: function() { 
        console.log("Aaa"); 
        eventBus.$emit('eventBusName', "hellokugou"); 
      } 
    }, 
  } 
</script> 
<style> 
</style>

Suivi par transittwo (auditeur)

<template> 
  <p class="transimissiontwo"> 
    <button @click="method1">点击console.log出eventbus的信息 
</button> 
  </p> 
</template> 
 
<script> 
  export default { 
    name: "transimissiontwo", 
    methods: { 
      method1: function() { 
        //使用on老监听事件 
        eventBus.$on('eventBusName', function(val) {  
          console.log("这个是用transimissiontwo的val值为："+val) 
        }) 
      } 
    } 
  } 
</script> 
<style> 
 
</style>

Vient ensuite notre hub. application. Utilisez

<template> 
  <p id="app"> 
    <click></click> 
  <transimissiontwo></transimissiontwo> 
    <transimissionone></transimissionone> 
  <sendparent @listenertochildevent="getmessagefromchild"></sendparent> 
    <value :locallogo="netlogo"></value> 
    <!--无法监听，说明要在那个组件中--> 
    <button @listenertochildevent="getmessagefromchild">测试能否监听</button> 
    <my_plug_in></my_plug_in> 
    <p class="choose_p"> 
      <ul> 
        <li> 
          <router-link to="/foo">foo页面</router-link> 
        </li> 
        <li> 
          <router-link to="/header">header页面</router-link> 
        </li> 
        <li> 
          <router-link to="/hello">hello页面</router-link> 
        </li> 
        <li style="clear: both;list-style: none;"></li> 
      </ul> 
    </p> 
    <p class="main"> 
      <router-view class="my_router_iew"></router-view> 
    </p> 
    <testmintui></testmintui> 
  </p> 
</template> 
 
<script> 
  import value from './components/value' 
  import click from "./components/click" 
  import my_plug_in from "./components/plug_in" 
  import sendparent from "./components/send_parent" 
  import testmintui from "./components/Test_mint-ui" 
  import transimissiontwo from "./components/transimissiontwo" 
  import transimissionone from "./components/transimissionone" 
  export default { 
    name: 'app', 
    data() { 
      return { 
        netlogo: "主页显示信息到组件中" 
      } 
    }, 
    components: { 
      value, 
      click, 
      my_plug_in, 
      sendparent, 
      testmintui, 
      transimissionone, 
    transimissiontwo, 
     
    }, 
    methods: { 
      getmessagefromchild: function(data) { 
        console.log(data); 
      } 
    } 
  } 
</script> 
<style> 
  body { 
    background-color: #f8f8ff; 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    color: #2c3e50; 
  } 
  ul { 
    width: 12rem; 
  } 
  ul li { 
    list-style: none; 
  } 
  ul li:not(:last-child) { 
    list-style: none; 
    width: 2rem; 
    margin-left: 0.1rem; 
    margin-right: 0.1rem; 
    float: left; 
    text-align: center; 
    background: #2C3E50; 
    color: white; 
  }    
  ul li a { 
    text-decoration: none; 
    font-size: 16px; 
    color: white; 
    line-height: 1rem; 
    text-align: center; 
  } 
  ul li:nth-child { 
    list-style: none; 
    clear: both; 
  } 
  .choose_p { 
    width: 100%; 
    overflow: scroll; 
  } 
</style>

dans la vue Veuillez ignorer le code inutile. La prochaine étape consiste à définir eventbus

window.eventBus = new Vue();

Ça y est, c'est très simple

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Angular4 implémente l'effet 3D

AngularJS implémente les étapes de sélection du menu déroulant de liaison secondaire dans détail

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!