eventbus
兄弟组件进行传数据/方法可通过eventBus来实现,也可以用状态管理 vuex来实现
新建一个model文件夹,创建一个bus.js文件,创建一个vue实例
1
2
3
4
5import Vue from 'vue
const VueEvent = new Vue()
export default VueEvent接下来在A组件里对B组件进行传值:
1
2
3
4
5import VueEvent from '.../model/bus.js
VueEvent.$emit('to-b',//传数据对应接收的参数名,this.msg //要传的数据)
VueEvent.$emit('to-b',this.msg)在b组件接受a组件传过来的数据
1
2
3
4
5import VueEvent from '../model/bus.js'
VueEvent.$on('to-b',(data)=>{
console.log(data) //data就是传过来的数据
})
总结
非父子组件传值
- 新建一个js文件,引入vue,实例化vue——Vue,最后暴露这个实例,export default
- 在要发布数据的组件引入bus.js定义的Vue实例
- 通过 VueEvent这个实例,VueEvent.$emit(‘名称’,’数据’)
- 在订阅数据的组件引入bus.js定义的vue实例,通过VueEvent.$on(‘名称’,’数据’)来得到数据
vue-router
1 | 新建一个router文件夹,index.js |
动态路由:1
2
3
4
5
6
7
8
9
10<router-link to="/content/${index}" for="(item,index) in list">新闻</router-link>
routes: [
{
path: '/content/:aid', //必须要这样配置,否则将匹配不到
component: 'Content'
}
]
然后可以在Content组件里通过 this.$route.params 来获取动态路由传过来的值了
总结
不同路由传值,动态路由
配置动态路由
1
2
3
4
5
6routes: [
{
path: '/user/:id',
component: User
}
]在对应的页面通过
this.$route.params 来获取动态路由传过来的值
通过get传值:1
2
3
4
5
6
7
8
9
10<router-link to="/content?aid=index" for="(item,index) in list">新闻</router-link>
routes: [
{
path: '/content',
component: 'Content'
}
]
然后可以在Content组件里mounted钩子函数里通过 this.$route.query 来获取动态路由传过来的值了
vuex
vuex 使用单一状态树,解决了vue组件间同一状态的共享问题,解决了不同组件的数据共享问题,还加强了组件里面数据的持久化
- 创建一个store文件夹,index.js文件.
- 安装vuex,yarn add vuex –save
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex) 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24store-index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 1
}
const mutations = {
incCount() {
++state.count
}
}
const store = new Vuex.Store({
state,
mutations:
})
export default store
在main.js 引入store,并传入store
在组件中引入store1
2
3
4
5
6
7
8
9
10import store from '../store/index.js
如果要使用store里的state数据,要用 this.$store.state.count
改变数据:
methods: {
incCount() {
this.$store.commit('incCount') //出发mutations里的incCount方法
}
}
获取state里面的数据
this.$store.state.数据触发mutations 改变state里面的数据
this.$store.commit(‘incCount’)通过触发actions里面的方法来触发mutations改变数据
this.$store.dispatch(‘incCount’)可以获取到getters计算后的数据,需要return 返回