vue给php传值,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(发送事件的文件)

点击发送数值到eventbus中

export default {

name: "transimission1",

methods: {

get: function() {

console.log("Aaa");

eventBus.$emit('eventBusName', "hellokugou");

}

},

}

其次是transimissiontwo(监听者)

点击console.log出eventbus的信息

export default {

name: "transimissiontwo",

methods: {

method1: function() {

//使用on老监听事件

eventBus.$on('eventBusName', function(val) {

console.log("这个是用transimissiontwo的val值为："+val)

})

}

}

}

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

测试能否监听

• foo页面

• header页面

• hello页面

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

}

}

}

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;

}

请无视掉没用的代码。接着就是定义eventbus了window.eventBus = new Vue();

就这样，很是简单

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：