前端vue子组件和父组件实现双向绑定

最新推荐文章于 2023-12-15 12:11:53 发布

SY_FC

最新推荐文章于 2023-12-15 12:11:53 发布

阅读量373

点赞数 2

文章标签： Vue v-model 父子组件数据绑定动态联动

本文链接：https://blog.csdn.net/FUFCY/article/details/124824135

版权

父组件

<template>
<view class="main">
//name跟随子组件变化而变化
	{{name}}
//子组件
<app-form-input v-model:value="name" placeholder="请输入"></app-form-input>
</view>
</template>

<script>
export default {
  data() {
    return {
			name:'11',
				
			}
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>

</style>

子组件

<template>
	<view>
		<input v-model="value" @input="oninput" class="app-form-input" :placeholder="placeholder"/>
	</view>
</template>

<script>
	export default {
		name:"app-form-input",
		// model:{
		// 	prop:"name",
		// 	event:"event"
		// },
		props:{
//取决于父组件的v-model:value
			value:{
				// type:,
				default: null
			},
			placeholder:{
				type:String,
				default: '请输入'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
//输入框被触发
			oninput(val){
				console.log("val",val)
				this.$emit('update:value',this.value)
			}
		}
	}
</script>

<style>

</style>