Vue组件间传值方法总结与梳理

组件间传值方法汇总

1. 父子组件传值

   ①父组件向子组件传值

   	<!-- 父组件=>子组件 -->
   	<!-- 利用自定义属性进行传值 -->
   	<my-box :count='selRes'></my-box>
   

   //子组件的props接收数据
   Vue.component('my-box',{
   	props : {
   		count : {
   			type : Number, //数据类型
   			required : false, //true   是否必传
   			default : 1  //默认值
   		}
   	}
   })
   

   ②子组件向父组件传值

   	<!-- 子组件=>父组件 -->
   	<!-- 利用自定义事件进行传值 -->
   	<my-box :count='selRes' @diyEvent='change'></my-box>
   

   //子组件利用Vue实例的$emit方法触发自定义事件diyEvent并向change事件传递参数
   Vue.component('my-box',{
   	template : `
   		<div class='cates'>
   	      <span @click='$emit("diyEvent", 参数)'> </span>
   	    </div>
   	`,
   })
   	
   

2. 组件间传值

   ①事件总线(bus)
   就是再创建一个Vue实例，将这个实例当作数据中转站，可以用它在组件间做数据交互，在项目比较小时，用这个比较实用、便捷

   	// 事件总线
   	var bus = new Vue()
   	// 发送 bus.$emit("秘钥"，数据)
   	// 接收  bus.$on("秘钥"，(数据)=>{})
   

   ②状态管理(vuex)
   利用vuex的mapState、mapGetters、mapMutations、mapActions等4种映射方法，实现组件间数据共享与交互，详情请看状态管理

   ③路由传参
   路由传参一般都是单向的，在组件跳转时使用，且通常使用编程式导航进行跳转，如：
   this.$router.push(’/detail/’+id)

   const User = {
     props: {
     id : {
     	type : String,
     	required : true
     },
     template: '<div>User {{ id }}</div>'
   }
   
   const router = new VueRouter({
     routes: [
       {
       path: '/user/:id', 
       component: User, 
       props: true    //路由传参时此项必须为true
       }
     ]
   })