Vue组件之间的传值方法

Vue组件之间的传值方法

父组件传给子组件：子组件通过props方法接收数据；
子组件传给父组件：$emit方法传递参数；

1. 父组件向子组件传值

父组件：

<template>
	<div>
		<HelloWorld :test='name'></HelloWorld>
	</div>
</template>
<script>
	import HelloWorld from './components/HelloWorld.vue'
	export default {
		name: 'App',
		components: {
			HelloWorld
		},
		data() {
			return {
				name: '123'
			}
		},
	}
</script>

子组件：

<template>
	<div>
		<span>{{ test }}</span>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props:['test']
	}
</script>

2. 子组件向父组件传值
父组件

<template>
	<div>
		<HelloWorld @userSj="getUser"></HelloWorld>
		<p>用户名：{{ user }}</p>
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'
	export default {
		name: 'App',
		components: {
			HelloWorld
		},
		data() {
			return {
				user: ''
			}
		},
		methods: {
			getUser (msg) {
				this.user = msg
			}
		}
	}
</script>

子组件

<template>
	<div>
		<input @change="setUser" v-model="username" type="text">
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				username: ''
			}
		},
		methods: {
			setUser: function(){
				this.$emit('userSj',this.username)
			}
		}
	}
</script>