vue组件之间的传值方式

来源：懂视网责编：小采时间：2020-11-27 19:54:39

vue组件之间的传值方式

vue组件之间的传值方式:这次给大家带来vue组件之间的传值方式，vue组件之间传值的注意事项有哪些，下面就是实战案例，一起来看一下。对于前端的我们而言，并非是只有写界面才是最大的问题，很多的情况下，我们需要关注的是数据，比如js页面的数据传递等等，学习vue我们也是需要知道

推荐度：

点击下载本文 文档为doc格式

导读vue组件之间的传值方式:这次给大家带来vue组件之间的传值方式，vue组件之间传值的注意事项有哪些，下面就是实战案例，一起来看一下。对于前端的我们而言，并非是只有写界面才是最大的问题，很多的情况下，我们需要关注的是数据，比如js页面的数据传递等等，学习vue我们也是需要知道

这次给大家带来vue组件之间的传值方式，vue组件之间传值的注意事项有哪些，下面就是实战案例，一起来看一下。

对于前端的我们而言，并非是只有写界面才是最大的问题，很多的情况下，我们需要关注的是数据，比如js页面的数据传递等等，学习vue我们也是需要知道怎么去使用数据

当然，使用存储也是可以得，但是并非一定要缓存，当然在vue中有推荐了我们去使用vuex去数据交互，Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。然而，有时候我们的项目并没有复杂到需要用上Vuex。，（我们也不讨论已经废除的vm.$dispatch）很多情况下我们都是需要一个事件的捕获，这时候我们就可以用到vue的eventbus了

受用eventbus的方法很是简单，我们需要做三步事情，第一步，我们需要创造一个容器去充当我们的eventbus

第二步，我们需要去抛出，或者说提交我们的事件

第三步，我们去监听我们的那个事件（也许这才是第二部）

首先，我们需要在全局定义我们的eventbus

这里我们定义到了eventbus。这就简单的完成了我们的第一步，当然，全局变量，我想你应该知道定义在哪儿的

接着我们先去抛出这个事件，使用￥。emit去“提交”

怎样，这点都可以理解吧，其次我们经行第三步，去监听

当然。这里已经监听好的。点击事件俺只是个累赘，

接下来我们就要去界面中使用它们了

首先，倒入我们所需要的文件：

这里我使用的是谈transimissionone还有transimissiontwo两个文件‘

接着是定义

其次是使用

最后运行我们的项目，查看下效果

这边主要是交大家使用，所以代码就俘虏在下面，主要是四个文件

transimissionone。vue（发送事件的文件）

<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>

其次是transimissiontwo（监听者）

<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>

接着是我们的中枢。app。vue中使用

<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>

请无视掉没用的代码。接着就是定义eventbus了