组件传值方式——总结

父传子

父组件：用自定义属性传递

<template>
	<div>
		<child :sth="val"></child>
	</div>
</template>

子组件：用props接收

props:['sth']

子传父

父组件：自定义一个事件用于接收

<template>
	<div>
		<child @receiveChildEvent="receiveChild"></child>
	</div>
</template>

methods:{
	receiveChild(val){
		console.log(val)
	}
}

子组件：利用$emit触发自定义事件

this.$emit('receiveChildEvent','val')

兄弟组件传值

1.子传父 ——> 父再传子

2.将监听事件和触发事件绑定在同一个实例上

 $.emit('event name', params)
 $.on('event name', callback)

要传值的两个组件在同一个vue组件树里，即根组件 this.$root 相同
可以绑定在root上

child1：
    methods:{
    	child1Click(){
        	this.$root.$emit("receiveBrotherEvent", 'brother1')
    	}
	}

child2:
	created(){
		this.$root.$on('receiveBrotherEvent',function(val){
			console.log(val)
		})
	}

任意组件传值

1.利用新的vue实例bus传值（万能传值）

创建bus.js

import Vue from "vue"
export default new Vue()

组件1：

<template>
   <button @click="btnClick">btn</button>
</template>

<script>
    import bus from "@/bus.js"
    export default {
        methods:{
            btnClick(){
                bus.$emit("eventListener", 'value')
            }
        }
    }
</script>

组件2：

<template>
</template>

<script>
    import bus from "@/bus.js"
    export default {
        created(){
            bus.$on('eventListener',function(val){
                console.log(val)
            })   
        }
    }
</script>

此法可以任意组件间传值。

2.伪传值方式
使用vuex || localStorage || sessionStorage