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

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

v-model 简单认识

v-model 是 vue 用于数据双向绑定的一个指令。其实它是一个语法糖，本质上包含两个操作：

1. v-bind 绑定一个 value 属性
2. v-on 指令给当前元素绑定 input 事件
   即

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

等同于

<inputtype="text"v-bind:value="message"v-on:input="message=$event.target.value"
/>

v-model 修饰符：

• .lazy：让数据在失去焦点或者回车时才更新
• .number：输入字符串转为有效的数字
• .trim：输入首尾空格过滤

如何在自定义组件中使用 v-model 指令

通过上述分析，要想在调用自定义子组件中使用 v-model 指令，需要在子组件 props 中增加 value 属性，在数据变化时通过$emit 调用 input 方法。如示例所示。
子组件 mySelect .vue 代码：

<template><el-select v-model="selected" @change="syncValue()" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :value="item.value">el-option>el-select>
template><script>export default {props: {// step 1value: {type: String,default: "",},},data() {return {selected: this.value,options: [{value: "黄金糕1",},{value: "双皮奶1",},],};},methods: {//step 2syncValue() {this.$emit("input", this.selected);},},};
script>

父组件代码：

<template><div id="example"><my-select v-model="food"></my-select><span>我选择的食物是：{{ food }}</span></div>
</template>
<script>
import MySelect from './mySelect.vue';
export default {components: { MySelect },data() {return {food: ''};}
};
</script>

运行结果：

value 属性和 input 方法是 v-model 默认的，有时我们可能需要将属性名和方法名更改为其他的值。这时还需要定义 model 属性。

model: { prop: 'food', event: 'select' },
props: { food:{ type: String, default: '' }

子组件 mySelect2.vue 代码：

<template><el-select v-model="selected" @change="syncFood()" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :value="item.value">el-option>el-select>
template><script>export default {model: {prop: "food",event: "select",},props: {food: {type: String,default: "",},},data() {return {selected: this.food,options: [{value: "黄金糕2",},{value: "双皮奶2",},],};},methods: {syncFood() {this.$emit("select", this.selected);},},};
script>

父组件代码将导入的子组件换为 mySelect2.vue 即可。

import MySelect from "./mySelect2.vue";

运行结果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！