首页 > 其他分享 >vue3 自定义组件双向绑定(modelValue)

vue3 自定义组件双向绑定(modelValue)

时间:2023-04-24 14:02:15浏览次数:53  
标签:自定义 default modelValue tinymceData vue3 组件 import type

参考链接:https://huaweicloud.csdn.net/638edf68dacf622b8df8d152.html

父组件:

<Customabc
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: 'Customabc',
    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>


 

标签:自定义,default,modelValue,tinymceData,vue3,组件,import,type
From: https://www.cnblogs.com/gaosj20210301/p/17349273.html

相关文章

  • java token自定义实现
    importcom.example.newsmanager.model.Token;importjavax.servlet.http.Cookie;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;publicclassTokenUtil{publicstaticfinalStringTOKEN_NAME="token&......
  • 记录在vue3项目中使用wangeditor富文本编译器以及微信小程序中的渲染
    首先,管理后台中的使用npminstallwangeditor//f封装成了组件,以下是组件中的内容<template>  <divstyle="border:1pxsolid#ccc;maxwidth:600px">   <!--工具栏-->   <Toolbar    style="border-bottom:1pxsolid#ccc"    :......
  • 自定义权限校验方法、基于配置的权限控制、CSRF
    自定义权限校验方法我们也可以定义自己的权限校验方法。在@PreAuthorize注解中使用我们的方法。创建expression包,在该包下创建SGEexpression类@Component("ex")publicclassSGEexpression{publicbooleanhasAuthority(Stringauthority){//获取当前用户......
  • ai问答:使使用 Vue3 组合式API 和 TypeScript 父子组件demo
    这是一个使用Vue3组合式API和TypeScript的简单父子组件示例父组件Parent.vue:<template><div><p>{{msg}}</p><Child/></div></template><scriptlang="ts">import{ref}from'vue'import......
  • c# 异步进阶———— 自定义 taskschedule[三]
    前言我们知道我们的taskasync和await是基于线程池进行调度的。但是async和await也就是使用了默认的task调度,让其在线程池中运行。但是线程池是榨干机器性能为本质的,但是有时候我们运行一些我们自己的需求,比如控制一下线程数(因为并不是线程数越高,就能有更高的性能),控制一......
  • Vue3 Suspense
    视频3.Suspense等待异步组件时渲染一些额外内容,让应用有更好的用户体验使用步骤:异步引入组件import{defineAsyncComponent}from'vue'constChild=defineAsyncComponent(()=>import('./components/Child.vue'))使用Suspense包裹组件,并配置好default与fallba......
  • Vue3 Teleport
    视频2.Teleport什么是Teleport?——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。<teleportto="移动位置"> <divv-if="isShow"class="mask"> <divclass="dialog"> <h3>我是一个弹窗</h3> <button@clic......
  • Vue3 Composition API 的优势
    视频四、CompositionAPI的优势1.OptionsAPI存在的问题使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。2.CompositionAPI的优势我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。......
  • Vue3 Fragment
    视频五、新的组件1.Fragment在Vue2中:组件必须有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,减小内存占用......
  • Vue3 响应式数据的判断
    视频6.响应式数据的判断isRef:检查一个值是否为一个ref对象isReactive:检查一个对象是否是由reactive创建的响应式代理isReadonly:检查一个对象是否是由readonly创建的只读代理isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理App.vue<tem......