Vue组件之间传值

参考：https://www.cnblogs.com/LoveAndPeace/p/7273648.html
https://blog.csdn.net/qq_35430000/article/details/79291287

一、父组件通过prop向父组件传递数据

子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。
子组件部分：

<template>
	<div id="logo">{{logo}}</div>
</template>

<script>
	export default {
		name: 'headerDiv',
		data () {
			return {
				//一些数据
			}
		},
		props: {'logo':[Number, String]};
	}
</script>

父组件部分：

<template>
	<div id="app">
		<HeaderDiv :logo="logoMsg"></HeaderDiv>
	</div>
</template>

<script>
    import HeaderDiv from ''

	export default {
		name: 'app',
		data () {
			return {
				logoMsg: 'Hello'
			}
		},
		components: {
			HeaderDiv
		}
	}
</script>

二、子组件通过事件向父组件传递数据

子组件部分：

<template>
	<section>
		<div>
			<label>
				<span>用户名：</span>
				<input v-model="username" @change="setUser" />
			</label>
		</div>
	</section>
</template>

<script>
	export default {
		name: 'loginDiv',
		data () {
			return {
				username: ''
			}
		},
		method: {
			setUser: function () {
				this.$emit('transferUser', this.username);
			}
		}
	}
</script>

子组件通过$emit来触发父组件当中的transferUser事件，并传递数据this.username
父组件部分：

<template>
	<div id="app">
		<LoginDiv @transferUser="getUser"></LoginDiv>
		<p>用户名为：{{user}}</p>
	</div>
</template>

<script>
	import LoginDiv from ''
	export default {
		name: 'app',
		data () {
			return {
				user: ''
			}
		},
		method: {
			getUser(msg) {
				this.user = msg;
			}
		},
		components: {
			LoginDiv
		}
	}
</script>

三、不同组件间进行传值(小项目)，通过EventBus

定义一个新的Vue实例专门用于传递数据
eventBus：

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

组件A：

<template>
	<div class="componentA">
		<button @click="emitToB">点击按钮传递数据给组件B</button>
	</div>
</template>

<script>
	import eventBus from ''
	export default {
		methods: {
			emitToB() {
				eventBus.$emit('eventFromA', '我是组件A传递给组件B的数据');
			}
		}
	}
</script>

组件B：

<template>
	<div class="componentB">
		{{title}} <!--显示传递过来的信息-->
	</div>
</template>

<script>
	import eventBus from ''
	export default {
		data() {
			return {
				title: ''
			}
		},
		mounted() {
			this.getEventData()
		},
		methods: {
			getEventData() {
				const that = this;
				eventBus.$on('evnetFromA', function (val) {
					this.title = val;
				})
			}
		}
	}
</script>

四、Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这个就说来话长了，所以以后再说吧！