vue3中update:modelValue的使用与不生效问题解决

 更新时间:2022年03月31日 11:00:29   作者:淡淡的芦苇  
现在vue3的使用越来越普遍了,vue3这方面的学习我们要赶上,下面这篇文章主要给大家介绍了关于vue3中update:modelValue的使用与不生效问题的解决方法,需要的朋友可以参考下

v-model中update:modelValue

v-model的主要原因是由于value和input事件可能另有它用,那么我们可不可以直接使用另外的属性和方法,而不需要去通过model进行定义。

vue3中就实现了这个功能,v-model绑定的不再是value,而是modelValue,接收的方法也不再是input,而是update:modelValue

写法:

<ChildComponent v-model:title="title" />
//或者
<ChildComponent :modelValue = "title" @update:modelValue = "title = $event">
// 或者
<ChildComponent :title="title" @update:title = "title = $event" />

使用:

父组件

<wm-tinymce
  ref="editor"
  v-model="data.introduction"
  :min-height="400"
  name="职能管理"
  placeholder="请编辑职能大类"
/>

子组件

<div class="tinymce-container">
    <editor
      v-model="tinymceData"
      :api-key="key"
      :init="tinymceOptions"
      :name="name"
      :readonly="tinymceReadOnly"
    />
</div>
<script>
  import { ref, watch, watchEffect } from 'vue'
  import Editor from '@tinymce/tinymce-vue'
  import { key, plugins, toolbar, setting } from './config'
  export default {
    name: 'WmTinymce',
    components: { Editor },
    props: {
      modelValue: {
        type: String,
        default: '',
      },
      readOnly: {
        type: Boolean,
        default: false,
      },
      options: {
        type: Object,
        default() {
          return { plugins, toolbar }
        },
      },
      name: {
        type: String,
        default: '',
      },
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      const tinymceData = ref(props.modelValue) // 编辑器数据
      watch(
        () => tinymceData.value,
        (data) => emit('update:modelValue', data)
      ) // 监听富文本输入值变动
      return {
        tinymceData,
      }
    },
  }
</script>

vue3子组件update:modelValue不生效问题

用event去做绑定

<ChildComponent :title=“title” @update:title = “title = $event” />

也就是加上 @update:title = “title = $event” 测试成功

总结

到此这篇关于vue3中update:modelValue的使用与不生效问题解决的文章就介绍到这了,更多相关vue3 update:modelValue使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue使用vue-json-viewer插件展示JSON格式数据的方法

    vue使用vue-json-viewer插件展示JSON格式数据的方法

    这篇文章主要给大家介绍了关于vue使用vue-json-viewer插件展示JSON格式数据的相关资料,前端使用这个插件可以方便展现出json格式的数据,下载引入使用代码可直接使用,需要的朋友可以参考下
    2024-05-05
  • 简单实现Vue的observer和watcher

    简单实现Vue的observer和watcher

    这篇文章主要教大家如何简单实现Vue的observer和watcher,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue使用canvas手写输入识别中文

    vue使用canvas手写输入识别中文

    这篇文章主要介绍了vue使用canvas手写输入识别中文,工作时遇到一些项目如:系统上的输入法使用不方便,客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧
    2021-11-11
  • Vue实现的父组件向子组件传值功能示例

    Vue实现的父组件向子组件传值功能示例

    这篇文章主要介绍了Vue实现的父组件向子组件传值功能,结合完整实例形式简单分析了vue.js组件传值的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    本篇文章主要介绍了windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • VsCode工具开发vue项目必装插件清单(推荐!)

    VsCode工具开发vue项目必装插件清单(推荐!)

    对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,下面这篇文章主要给大家介绍了关于VsCode工具开发vue项目必装插件的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 详解elementUI中input框无法输入的问题

    详解elementUI中input框无法输入的问题

    这篇文章主要介绍了详解elementUI中input框无法输入的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue3如何利用自定义指令实现下拉框分页懒加载

    vue3如何利用自定义指令实现下拉框分页懒加载

    下拉框一开始请求第一页的内容,滚动到最后的时候,请求第二页的内容,如此反复,直到所有数据加载完成,这篇文章主要介绍了vue3如何利用自定义指令实现下拉框分页懒加载,需要的朋友可以参考下
    2024-07-07
  • 如何在Vue.js中实现标签页组件详解

    如何在Vue.js中实现标签页组件详解

    这篇文章主要给大家介绍了关于如何在Vue.js中实现标签页组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • vue 动态组件component

    vue 动态组件component

    这篇文章主要介绍了 vue 动态组件component ,vue提供了一个内置的<component>,专门用来实现动态组件的渲染,这个标签就相当于一个占位符,需要使用is属性指定绑定的组件,想了解更多详细内容的小伙伴请参考下面文章的具体内容
    2021-11-11

最新评论