Vue自定义组件中使用v-model

最新推荐文章于 2024-09-30 10:50:08 发布

原创最新推荐文章于 2024-09-30 10:50:08 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue.js框架中v-model指令的工作原理及其在自定义组件中的应用。v-model是一种用于实现表单元素双向数据绑定的简洁方式，它简化了开发者在不同类型的输入控件上设置和获取数据的过程。

Vue自定义组件中使用v-model

什么是v-model
- v-model的使用
- v-model自定义组件中的使用

什么是v-model

你可以用 v-model 指令在表单 < input>、 < textarea> 及 < select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
本质上讲v-model是v-bind以及v-on配合使用的语法糖。

<input v-model="text"/>
//相当于
<input :value="text" @input="text= $event.target.value" />

v-model的使用

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

举例

<input v-model="message" placeholder="edit me">
//多行文本
<textarea v-model="message" placeholder="add multiple lines"><textarea>
//复选框
<input type="checkbox" id="checkbox" v-model="checkbox">

: 具体可查看vue.js官方文档.

v-model自定义组件中的使用

通过上面我们已经了解到v-model是v-bind 和v-on 联合使用的语法糖，也就是说我们定义的组件中只要做到

```
子接受到的porp值=value
```

监听子组件处罚的事件名 event = input

就可以实现数据的双向绑定
举例

<template>
    <div>
        <input  :value="str" @change="textstr($event.target.value)"/>

    </div>
</template>
<script>
    export default{
        props: {
            str:String
        },
        model:{
            prop:'str',
            event:'tex'
        },
        data () {
            return {
                
            }
        },
        methods: {
            textstr (value) {
                console.log(value)
                this.$emit('tex', value)
            }
        }

    }
</script>

使用时

 <textmodel v-model='lovingVue' ></textmodel>

上述代码中model为vue2.2.0版本新增属性
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。