vue3中update:modelValue的使用与不生效问题解决
短信预约 -IT技能 免费直播动态提醒
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使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
