vue 表单数据双向绑定

• 子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到
• 而子组件也可以通过$emit(‘input’,this.val)，去改变父组件中v-model 和 子组件中 value 的值 。

<ywselect v-model="form.name" :author="author"></ywselect>
<ywinput  :value.sync="form.input" placeholder="请选择活动区域"></ywinput>

input

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

<script>
	export default {
		name: "KInput",
		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)
				this.$emit('update:value', e.target.value)
				/* 在这里子组件通过方法onInput发射事件input,
				   通过props接收父组件的传递给子组件的value值，
				   父组件负责监听子组件的发射的事件input,得到的值value是第一个参数*/
			}
		},
	}
</script>

<style>
</style>

select

<template>
	<div class="yw-select">
		<el-select :value="value" filterable remote reserve-keyword placeholder="请输入关键词" @change="onInput" :remote-method="remoteMethod"
		:loading="loading">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
			</el-option>
		</el-select>
	</div>
</template>

<script>
	import {
		routes
	} from '@/router/index.js'
	var time = null
	export default {
		props: {
			//传进来的value值，只显示不修改
			author:{
				type: Object,
				default: function () {
					return { }
				}
			},
			value: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				options: [],
				loading: false
			}
		},
		mounted() {
			this.getoption()
		},
		methods: {
			async remoteMethod(query) {
				console.log('sas')
				time = null;
				if (query !== '') {
					this.loading = true;
					time = setTimeout(() => {
						this.loading = false;
						this.$axios.get('/api/selects').then((res) => {
							if (res.data) {
								console.log(res.data)
								this.options = res.data.filter(item => {
									return item.lable.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
								});
							} else {
							}
						})
						
					}, 200);
				} else {
					this.options = [];
				}
			},
			async getoption(){
				// this.$axios.get('/api/selects').then((res) => {
				// 	if (res.data) {
				// 		this.options = res.data
				// 			console.log(res.data)
				// 	} else {
				// 	}
				// })
			},
			onInput(e) {
				console.log(e)
				this.$emit('input', e)
				//派发事件，通知父组件输入值发生变化
				//将e.target.value赋值给username
				// this.$emit('update:value', e)
				/* 在这里子组件通过方法onInput发射事件input,
				   通过props接收父组件的传递给子组件的value值，
				   父组件负责监听子组件的发射的事件input,得到的值value是第一个参数*/
			}
		}
	}
</script>

<style>
</style>