vue3 update:modelValue使用
淡淡的芦苇 人气:4v-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”
测试成功
总结
加载全部内容