Vue 组件传值
回想一下用Vue开发也有一年多了，但一直没有系统的整理一下相关知识，最近不太忙就总结一下在开发过程中所遇到的一些坑。今天主要总结一下Vue组件传值的几种常用方法：
1、通过路由带参数传值
① A组件通过query把id传给B组件
this.$router.
push({path:
'/B',query:{id:
1}})
② B组件接收
this.$route.query.id
2、父组件向子组件传值
使用props向子组件传递数据
子组件部分：child.vue
<
template>
<
div>
<
ul>
<
li
v-for='(item,index)
in nameList'
:key='index'>{{item.name}}li>
ul>
div>
template>
<
script>
export
default {
props:[
'nameList']
}
script>
父组件部分：
<
template>
<
div>
<
div>这是父组件div>
<
child
:name-list='names'>child>
div>
template>
<
script>
import child
from
'./child.vue'
export
default {
components:{
child
},
data(){
return{
names:[
{name:
'柯南'},
{name:
'小兰'},
{name:
'工藤新一'}
]
}
}
}
script>
3、子组件向父组件传值
子组件主要通过事件向父组件传递数据：
子组件部分：
<
template>
<
div>
<
ul>
<
li
v-for='(item,index)
in nameList'
:key='index'>{{item.name}}li>
ul>
<
Button
@click='toParent'>点击我Button>
div>
template>
<
script>
export
default {
props:[
'nameList'],
methods:{
toParent(){
this.
$emit(
'emitData',
123)
}
}
}
script>
父组件部分：
<
template>
<
div>
<
div>这是父组件div>
<
child
:name-list='names'
@emitData='getData'>child>
div>
template>
<
script>
import child
from
'./child.vue'
export
default {
components:{
child
},
data(){
return{
names:[
{name:
'柯南'},
{name:
'小兰'},
{name:
'工藤新一'}
]
}
},
methods:{
getData(
data){
console.
log(data);
//123
}
}
}
script>
4、兄弟组件传值
1、创建中央事件总线eventBus.js
（eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。）
//eventBus.js
import Vue
from
'vue';
export
default
new
Vue();
创建组件first.vue, 引入事件总线eventBus,并添加按钮绑定事件：
<
template>
<
div>
<
h1>first组件h1>
<
Button
@click='sendMsg'>向组件传值Button>
div>
template>
<
script>
import bus
from
'../../assets/eventBus.js'
export
default {
methods:{
sendMsg(){
bus.
$emit(
'message',
'this message is from first')
}
}
}
script>
创建组件second.vue，引入事件总线eventBus.js
<
template>
<
div>
<
h1>second组件h1>
<
p>{{data}}p>
div>
template>
<
script>
import bus
from
'../../assets/eventBus.js'
export
default {
data(){
return{
data:
''
}
},
mounted(){
bus.
$on(
'message',(
msg)
=>{
this.data
= msg;
})
}
}
script>
父组件
<
template>
<
div>
<
div>这是父组件div>
<
first>first>
<
second>second>
div>
template>
<
script>
import first
from
'./first.vue'
import second
from
'./second.vue'
export
default {
components:{
first,
second
}
}
script>
结果：
点击按钮：
2、使用vue-bus,提供了一个全局事件中心，并将其注入每一个组件，你可以像使用内置事件流一样方便的使用全局事件。
安装：npm install vue-bus
使用：如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装 vue-bus：
import Vue
from
'vue';
import VueBus
from
'vue-bus';
Vue.
use(VueBus);
监听事件和清除监听
// ...
created() {
this.$bus.on(
'add-todo', this.addTodo);
this.$bus.once(
'once', () => console.log(
'这个监听器只会触发一次'));
},
beforeDestroy() {
this.$bus.off(
'add-todo', this.addTodo);
},
methods: {
addTodo(
newTodo) {
this.todos.
push(newTodo);
}
}
触发事件
methods: {
addTodo() {
this.$bus.
emit(
'add-todo', { text:
this.newTodoText });
this.$bus.
emit(
'once');
this.newTodoText
=
'';
}
}
5、使用vuex
// store/index.js
// import Vue from 'vue';
// import Vuex from 'vuex';
// Vue.use(Vuex);
//普通方式
// const store = () => new Vuex.Store({
// state:{
// counter:0
// },
// mutations:{
// increment(state){
// state.counter++
// }
// }
// })
// export default store
//模块方式
export
const
state
= ()
=> ({
counter:
0
})
export
const mutations
= {
increment(
state) {
state.counter
++
}
}
<
template>
<
section
class=
"container">
<
div>
<
Button
@click="$store.
commit(
'increment')">{{$store.state.counter}}Button>
div>
section>
template>