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>