Maison > Article > interface Web > 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!