vue父子组件传值

1、父组件给子组件传值方法，使用props

父页面：parent.vue

<template>
	<div>
		<children :transmit="name"></children>
	</div>
</template>
<script>
	import children from './children.vue'
	export default {
		data() {
			return {
				name: 'admin',
			}
		},
		components: {
			children
		}
	}
</script>

子页面：child.vue

<template>
	<div>
		{{transmit}}
	</div>
</template>
<script>
	export default {
		name: 'children',
		props: ['transmit'],
        // props: {
		//	transmit: {
		//		type: String,
		//		default: null
		//	}
		},
	}
</script>

 步骤说明

1. 用import引入子组件
2. 在components中注入子组件
3. 在子组件中定义一个指令：transmit="name"  。transmit名称需要和子组件中的props保持一致，transmit是要传递给子组件的数据。
4. 在子组件中定义props属性，transmit的type可以自定义类型（但是必须和父组件中的数据类型一致，否则会报错），default是默认值。

2、子组件要给父组件传值方法，使用$emit

父页面：parent.vue

<template>
	<div>
		<children @child="getChild"></children>
	</div>
</template>
<script>
	import children from './children.vue'
	export default {
		data() {
			return {
				message: '',
			}
		},
		components: {
			children
		},
		methods: {
            // 获取子组件的值
			getChild(val) {
				console.log(val)
				this.message = val;
			}
		}
	}
</script>

子页面：child.vue

<template>
	<div>
		<input type="text" v-model="message" />
		<button @click="sendClick">发送给父组件</button>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				message: '',
			}
		},
		methods: {
			// 发送
			sendClick() {
				this.$emit('child', this.message);
			}
		}
	}
</script>

步骤说明

1. 子组件使用this.$emit("方法名","传递给父组件的数据")
2. 父组件中注入子组件
3. 定义方法child（必须和子组件中方法名一致），getChild定义可随意。