vue的model选项

 

 

 

今天在看vue-property-decorator时,遇到了@Model选项,也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定,对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾,加深印象后,再去理解model选项到底是做什么的,有什么作用。

vue中的v-model指令实现了表单的双向绑定,这是官网的一个栗子:

<input type="text" v-model="message">
<p>{{message}}</p>

v-model只是语法糖,真正的实现形式:

<input type="text" :value="message" @input="message = $event.target.value">

1.将输入框的值绑定到message变量上,这只是单向的,改变message的值可以改变input的value,但是改变input的输入不会改变message。

2.监听input事件,当输入类内容时改变message变量,从而实现了双向绑定。

从官网上看到,v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:

text和textarea元素使用value属性和input事件

checkbox和radio使用checked属性和change事件

select使用value和change事件

那么我们知道原理后,可以试着实现自定义输入框组件的v-model,即双向绑定

// js部分
Vue.component('custom-input',{
    // 1.监听input,输入时触发自定义组件内部的updateVal事件
    template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`,
    // 5.通过props传递,实现父组件值绑定到输入框的value
    props: ['value'],
    methods: {
        // 2.触发父组件上的input事件
        updateVal(val){
            this.$emit('input', val);
        }
    }
});

var app = new Vue({
    el: '#app',
    data(){
        price: ''
    },
    methods: {
        // 3.传递过来的值赋给父组件的price变量,实现了输入框到父元素的单向绑定
        onInput(val){
            this.price = val;
        }
    }
})
// HTML部分
<div id="app">
    // 4.父组件的value值绑定到price
    <price-input :value="price" @input="onInput"></price-input>
</div>

通过上面的分析,默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定,因为自定的组件并没有默认的value和input事件,在使用时,我们需要按照上面那样显式的去声明定义这些东西。这时,model选项就派上用场了,在定义组件的时候,指定prop的值和监听的事件。

Vue.component('my-input',{
    model: {
        prop: 'uname',
        // 随便命名事件,对应下面$emit即可
        event: 'changeXXX'
    },
    props: {
        uname: {
            type: String,
            default: 'tom'
        }
    },
    methods: {
        updateVal(val){
            this.$emit('changeXXX',val)
        }
    }
})
<template>
    <input type="text" :value="uname" @input="updateVal($event.target.value)">
</template>

父组件内使用时,使用v-model就可以啦

// name是父组件中的属性
<my-input v-model="name" value="some value"></my-input>
<p>{{name}}</p>

等价于

<my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

### Vue.js 中的 Model 概念与用法 Vue.js 的核心特性之一是其双向数据绑定机制,这使得开发者可以轻松地在视图和模型之间同步数据。Vue 提供了 `v-model` 指令来实现这一功能,它简化了表单输入元素和应用状态之间的连接[^2]。 #### 1. 基本用法 `v-model` 是 Vue.js 中用于实现双向数据绑定的核心指令。它可以将表单控件(如 `<input>`、`<textarea>` 和 `<select>`)的值与组件的状态进行绑定。当用户修改表单控件的值时,绑定的数据会自动更新;反之亦然。 ```html <!-- 示例:简单的 v-model 绑定 --> <template> <div> <input v-model="message" placeholder="请输入内容"> <p>你输入的内容是: {{ message }}</p> </div> </template> <script> export default { data() { return { message: '' }; } }; </script> ``` 在这个例子中,`v-model` 将输入框的值与 `message` 数据属性绑定在一起[^2]。 #### 2. 复杂表单元素的绑定 除了简单的文本输入框外,`v-model` 还支持其他类型的表单元素,例如复选框、单选按钮和下拉菜单。 - **复选框 (Checkbox)**: ```html <input type="checkbox" v-model="isChecked"> <p>是否选中: {{ isChecked }}</p> ``` - **单选按钮 (Radio Button)**: ```html <input type="radio" v-model="picked" value="A"> A <input type="radio" v-model="picked" value="B"> B <p>选择的选项: {{ picked }}</p> ``` - **下拉菜单 (Select)**: ```html <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> </select> <p>选择的选项: {{ selected }}</p> ``` 这些示例展示了如何使用 `v-model` 来处理不同类型的数据输入[^2]。 #### 3. 自定义组件中的 `v-model` 在自定义组件中,可以通过 `props` 和事件来实现 `v-model` 的功能。默认情况下,`v-model` 在子组件中绑定的是 `value` 属性,并监听 `input` 事件。 ```html <!-- 父组件 --> <template> <custom-input v-model="searchText"></custom-input> <p>搜索内容: {{ searchText }}</p> </template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { searchText: '' }; } }; </script> <!-- 子组件 --> <template> <input :value="value" @input="$emit('input', $event.target.value)" /> </template> <script> export default { props: ['value'] }; </script> ``` 在这个例子中,父组件通过 `v-model` 将 `searchText` 传递给子组件,而子组件通过 `@input` 事件将输入的值传递回父组件。 #### 4. 使用插件增强 `v-model` Vue 社区提供了许多插件来增强 `v-model` 的功能。例如,`vue-cleave-component` 可以帮助开发者格式化输入内容。以下是一个使用该插件的示例: ```html <template> <div> <cleave v-model="cardNumber" :options="options" class="form-control" name="card"></cleave> </div> </template> <script> import Cleave from 'vue-cleave-component'; export default { data() { return { cardNumber: null, options: { creditCard: true, delimiter: '-' } }; }, components: { Cleave } }; </script> ``` 这个示例展示了如何结合 `v-model` 和第三方插件来实现信用卡号码的自动格式化[^3]。 ### 注意事项 虽然 `v-model` 提供了强大的双向绑定功能,但在某些场景下可能需要禁用原始模式以获取掩码后的值。例如,在使用 `vue-cleave-component` 时,可以通过配置选项来控制是否启用原始模式。 ---
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值