vue 父子组件传值以及表单数据双向绑定

前言

本文是记录自己的学习心得，本人不是大牛会有一些理解不对的地方，共同学习欢迎大家提问纠错。

父传子prop

prop 父子组件之间的传值是单向的，也就是父组件通过prop 规定（name=“name”）向子组件传值，子组件可以获得props 的值，但是子组件改变props 的 name 值父组件的 name 不会改变。

例如：有一个组件 GInput

<template>
	<div>
		<input :type="type" :value="value" class="el-input__inner"></input>
	</div>
</template>
<script>
	export default {
		name: "GInput",
		props: {
			//传进来的value值，只显示不修改
			value: {
				type: String,
				default: ''
			},
			type: {
			  type: String,
			  default: 'text'
			},
		}
	}
</script>

父级调用

<GInput :value="value"></GInput>
<script>
	data:{
		value: '123456'
	}
</script>

子传父$emit()

由于prop 是单向的，所以官网给出了几种方法来向父级传值或改变父级的值
方法一：子组件调用父组件的 function 来改变父组件的值

• 父组件定义一个函数 子组件通过事件调用父组件自定义事件传给父组件value 使夫组件自己改变自己

<GInput :value="value" @ginput='ginput'></GInput>
ginput(val){
	this.value = val
}

• 子组件 this.$emit(‘ginput’,val) 调用父的 ginput

<input :type="type" :value="value" @oninput="input" class="el-input__inner"></input>
<script>
	input(val){
		this.$emit('ginput',val)
	}
</script>

方法二：.sync 修饰符
我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

• 父组件

<GInput :value.sync="value"></GInput>
	data{
		value: ''
	}

• 子组件 this.$emit(‘update:value’,val)

<input :type="type" :value="value" @oninput="input" class="el-input__inner"></input>
<script>
	input(val){
		this.$emit('update:value',val)
	}
</script>

表单的双向绑定

• 父

<ywinput  v-model="input" placeholder="请选择活动区域"></ywinput>

<template>
	<div>
		<input :type="type" :value="value" @input="onInput" :placeholder="placeholder" class="el-input__inner"></input>
	</div>
</template>

<script>
	export default {
		name: "ywinput",
		props: {
			//传进来的value值，只显示不修改
			value: {
				type: String,
				default: ''
			},
			type: {
			  type: String,
			  default: 'text'
			},
			placeholder: {
				type: String,
				default: ''
			}
		},
		methods: {
			onInput(e) {
				//派发事件，通知父组件输入值发生变化
				//将e.target.value赋值给username
				this.$emit('input', e.target.value)
				/* 在这里子组件通过方法onInput发射事件input,
				   通过props接收父组件的传递给子组件的value值，
				   父组件负责监听子组件的发射的事件input,得到的值value是第一个参数*/
			}
		},
	}
</script>