v-model参数变化(vue3.x)

本文深入介绍了Vue.js中v-model的演变,从2.x到3.x的变化,包括语法糖的使用、自定义事件和prop的绑定。详细解析了v-model的参数和修饰符,并提供了2.x和3.x版本下父子组件间数据通信的实例,展示了如何通过v-model实现灵活的数据双向绑定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

v-model概述

  • 在 Vue 2.0 发布后,开发者使用 v-model 指令必须使用为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop,他们就不得不使用 v-bind.sync。此外,由于v-modelvalue 之间的这种硬编码关系的原因,产生了如何处理原生元素和自定义元素的问题。

  • 在 Vue 2.2 中,我们引入了 model 组件选项,允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 model

  • 在 Vue 3 中,双向数据绑定的 API 已经标准化,减少了开发者在使用 v-model 指令时的混淆并且在使用 v-model 指令时可以更加灵活。

2.x 语法

在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 和 input 事件:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果要将属性或事件名称更改为其他名称,则需要在 ChildComponent 组件中添加 model 选项:

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />
// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以,在这个例子中 v-model 是以下的简写:

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

使用 v-bind.sync

在某些情况下,我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此,我们建议使用 update:myPropName 抛出事件。例如,对于在上一个示例中带有 title prop 的 ChildComponent,我们可以通过下面的方式将分配新 value 的意图传达给父级:

this.$emit('update:title', newValue)

如果需要的话,父级可以监听该事件并更新本地 data property。例如:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见,我们可以使用 .sync 修饰符来缩写,如下所示:

<ChildComponent :title.sync="pageTitle" />

3.x 语法

在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

v-model 参数

若需要更改 model 名称,而不是更改组件内的 model 选项,那么现在我们可以将一个 argument 传递给 model

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-bind anatomy

这也可以作为 .sync 修饰符的替代,而且允许我们在自定义组件上使用多个 v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 是以下的简写: -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外,现在 3.x 还支持自定义修饰符:

<ChildComponent v-model.capitalize="pageTitle" />

vue2.x父子组件传值案例

  • 父组件
<template>
  <child-cpn :title="bookTitle" @changeBookTitle="ChangeTitle"></child-cpn>
  <h2>newBookTitle:{{bookTitle}}</h2>
</template>

<script>
  import ChildCpn from './ChildCpn.vue'
  export default {
      components: {
        ChildCpn,
      },
      data() {
        return {
          bookTitle: "青蛙王子"
        };
      },
      methods: {
        ChangeTitle(newBookTitle) {
          this.bookTitle = newBookTitle;
        }
      }
  }

</script>

<style scoped>

</style>
  • 子组件
<template>
    <input type="text" :value="title" @input="titleChange">
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    title: ''
  },
  methods: {
    titleChange(event) {
      this.$emit('changeBookTitle', event.target.value)
    }
  }
}

</script>

<style scoped>

</style>
  • 效果:

在这里插入图片描述

  • 我们看到在vue2.x中,父组件将title传递给子组件需要用prop接收,然后子组件再通过emit发送自定义事件,父组件再监听自定义事件才能完成一个值在父子组件间的同步。

vue3.x父子组件传值案例

默认情况下,组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称。

  • 父组件
<template>
  <child-cpn
  v-model:title="bookTitle"></child-cpn>
  <h2>newBookTitle:{{bookTitle}}</h2>
</template>
<script>
import ChildCpn from './ChildCpn.vue'
export default {
  components: {
    ChildCpn
  },
  data() {
    return  {
      bookTitle: "少有人走的路"
    }
  }
}
</script>
<style scoped>
</style>
  • 子组件
<template>
  <input 
    type="text" 
    :value="title" 
    @input="$emit('update:title', $event.target.value)">
</template>
<script>
export default {
  name: 'ChildeCpn',
  emits: ['update:title'],
  props: {
    title: String
  }
}
</script>
<style scoped>
</style>
  • 效果:

在这里插入图片描述

### 集成 `mavon-editor` 到 Vue3.x 项目的指南 #### 1. 安装依赖 为了在 Vue3.x 项目中使用 `mavon-editor`,首先需要通过 npm 或 yarn 将其安装到项目中。执行以下命令完成安装: ```bash npm install mavon-editor --save ``` 或者如果偏好使用 yarn,则运行: ```bash yarn add mavon-editor ``` 此过程会将 `mavon-editor` 添加至项目的依赖列表中[^2]。 --- #### 2. 引入并注册组件 由于 Vue3 的 API 发生了一些变化(例如 Composition API 和新的全局组件注册方式),因此需要调整引入和使用的逻辑。 以下是完整的集成步骤: ##### (a) 全局引入与注册 可以在 `main.js` 文件中进行如下操作来实现全局可用性: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; // 引入 mavon-editor 组件及其样式文件 import mavonEditor from &#39;mavon-editor&#39;; import &#39;mavon-editor/dist/css/index.css&#39;; const app = createApp(App); app.use(mavonEditor); app.mount(&#39;#app&#39;); ``` 这样可以确保整个应用程序都可以访问 `mavon-editor`[^1]。 --- ##### (b) 局部引入与注册 如果你只需要在特定页面或组件中使用该编辑器,可以选择局部引入的方式: ```javascript <template> <div> <!-- 使用 mavon-editor --> <mavon-editor v-model="content" /> </div> </template> <script> import { ref } from &#39;vue&#39;; import mavonEditor from &#39;mavon-editor&#39;; import &#39;mavon-editor/dist/css/index.css&#39;; export default { components: { mavonEditor, }, setup() { const content = ref(&#39;&#39;); // 双向绑定的内容量 return { content }; }, }; </script> ``` 上述代码展示了如何在一个单独的 Vue 组件中加载和初始化 `mavon-editor`。 --- #### 3. 基本功能说明 `mavon-editor` 提供了许多强大的特性,比如实时预览、语法高亮以及支持自定义工具栏按钮等功能。这些可以通过配置选项进一步定制化。 下面是一个简单的例子展示如何设置一些常用参数: ```html <mavon-editor :toolbars="toolbars" @change="handleContentChange" /> ``` 其中 `toolbars` 是一个对象,用于控制哪些工具栏项可见;而事件监听函数则允许捕获用户的输入行为。 ```javascript setup() { const toolbars = { bold: true, // 加粗 italic: true, // 斜体 header: true, // 标题 underline: false, // 下划线 (关闭) strikethrough: false, // 删除线 (关闭) }; function handleContentChange(value, render) { console.log(&#39;当前 Markdown:&#39;, value); console.log(&#39;渲染后的 HTML:&#39;, render); } return { toolbars, handleContentChange }; } ``` 以上片段演示了如何隐藏不需要的功能,并处理内容更回调[^4]。 --- #### 4. 解决可能遇到的问题 - **兼容性问题**:部分开发者报告说,在某些情况下可能会出现样式错乱的现象。这通常是因为 CSS 文件未被正确加载所致。务必确认已按照文档指示导入对应的样式表。 - **Vue 版本差异**:虽然官方声称支持 Vue3,但在实际开发过程中仍需留意是否存在潜在 bug。建议查看最新版本发布日志以获取更多信息。 --- ### 总结 综上所述,要成功地把 `mavon-editor` 整合进基于 Vue3 构建的应用程序里,主要分为三个阶段——即安装必要的包、适配新版框架结构下的实例化流程,最后再依据需求调优界面布局与交互体验. ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值