vue 组件之间的传值方式

vue 组件之间的传值方式有：
1、父组件传给子组件
2、子组件传给父组件
3、非父子组件之间传值

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

1、父组件向子组件传值：
父组件：

<template>
	<div>
		<input type="text" v-model="name">
		<!-- 引入子组件 -->
		<child :inputName="name"></child>
	</div>
</template>
<script>
	import child from './child'
	export default {
		components: {
			child
		},
		data () {
			return {
				name: ''
			}
		}
	}
</script>

子组件：

<template>
	<div>
		<span>{{ inputName }}</span>
	</div>
</template>
<script>
	export default {
		// 接收父组件传过来的值
		props: {
			inputName: String,
			required: true
		}
		// 也可以写成：props: [ “inputName” ]
	}
</script>

2、子组件向父组件传值：
子组件：

<template>
	<div>
		<span>{{ childValue }}</span>
		<!-- 定义一个子组件传值的方法 -->
		<input type="button" value="点击触发" @click="childClick">
	</div>
</template>
<script>
	export default {
		data () {
			return {
				childValue: '我是子组件的数据'
			}`在这里插入代码片`
		},
		methods: {
			childClick() {
				// childByValue是在父组件on监听的方法
				// 第二个参数this.childValue是需要传的值
				this.$emit('childByValue', this.childValue)
			}
		}
	}
</script>

父组件：

<template>
	<div>
		<span>{{name}}</span>
		<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
		<child v-on:childByValue="childByValue"></child>
	</div>
</template>
<script>
	import child from './child'
	export default {
		components: {
			child
		},
		data () {
			return {
				name: ''
			}
		},
		methods: {
			childByValue (childValue) {
				// childValue就是子组件传过来的值
				this.name = childValue;
			}
		}
	}
</script>

3、非父子组件进行传值：

非父子组件之间传值，建议使用 vuex 状态管理

vuex：https://vuex.vuejs.org/zh/guide/