组件不使用v-model实现数据的双向绑定

v-model相当于是value属性和input事件的语法糖,可以将一些模块封装成组件:比如说input这样有利于使用。
在父组件中的代码:

<two v-model="value"></two>
<div>{{ value }}</div>
import two from './two'//input组件

在子组件中:

<template>
    <div>
<input type="text"  :value=" value " @input="dian" >
        
    </div>
</template>
<script>
export default {
    name:"two",
    props:{
        value:{
            type:String,
            default:"moren"
        }
    },
    methods: {
        dian(e){
            this.$emit("input",e.target.value)
        }
    },
}
</script>
<style lang="scss">
    
</style>

当然value和input不能随便改变

猜你喜欢

转载自blog.csdn.net/weixin_47459930/article/details/106410865