【vue】vue组件间传值

组件传值三种：父组件向子组件传值、子组件向父组件传值、兄弟组件之间传值。

1、父-->子：通过属性传值，父组件将数据绑定到属性上，子组件通过props:['属性名']获取数据；

2、子-->父：通过事件加参数传值，父组件获取事件；

         <ul>
			<todo-item v-for="(item,index) of list" :key="index"
			:content="item" :index="index" @delete="handleDelete"
			></todo-item>
		</ul>
	</div>
	<script>
		Vue.component('todo-item',{
			props:['content','index'],
			template:'<li @click="handleClick">{{content}}</li>',
			methods:{
				handleClick:function(){
					this.$emit('delete',this.index)

				}
			}

		})

3、兄弟组件间传值

借助事件总线（全局变量），即定义vue全局对象msg（一般都是在.js文件中定义，兄弟组件使用时都要引入这个文件，import、export），通过一方发布msg.$emit('事件名','参数')、另一方接受msg.$on('事件名',function(参数){})，实现传值。

msg.js

import Vue from 'vue'
export default new Vue

引入：

<script type="text/javascript">
	import Msg from './msg.js'
	export default{
		methods:{
			menu1:function(){
				Msg.$emit("val","1")
			},
			menu2:function(){
				Msg.$emit("val","2")
			}
		}
	}
</script>

使用：

<script type="text/javascript">
	import Msg from './msg.js'
	import GoodList from './GoodList.vue'

	export default{
		data(){
			return {
				kk:0
			}
		},
		mounted:function(){
			var _this=this
			Msg.$on('val',function(m){
				_this.kk=m;
			})
		},
		components:{
			GoodList
		}
	}
</script>