vue3 中 update:modelValue
https://www.jb51.net/article/242919.htm
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
写法：
| 1<br>2<br>3<br>4<br>5 | ` <``ChildComponent ` ` v-model:title``=``"title" ` `/>`<br>//或者<br>` <``ChildComponent ` `:modelValue` `=` `"title"` ` @``update:modelValue ` `=` ` "title = $event"``> `<br>// 或者<br>` <``ChildComponent ` ` :title``=``"title" ` ` @``update:title ` `=` `"title = $event"` `/>` |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
使用：
父组件
| 1<br>2<br>3<br>4<br>5<br>6<br>7 | ` <``wm-tinymce `<br> ` ref``=``"editor" `<br> ` v-model``=``"data.introduction" `<br> ` :min-height``=``"400" `<br> ` name``=``"职能管理" `<br> ` placeholder``=``"请编辑职能大类" `<br>/> |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
子组件
| 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49 | ` <div class=``"tinymce-container"``> `<br> `<editor`<br> ` v-model=``"tinymceData" `<br> ` :api-key=``"key" `<br> ` :init=``"tinymceOptions" `<br> ` :name=``"name" `<br> ` :readonly=``"tinymceReadOnly" `<br> `/>`<br></div><br><script><br> `import { ref, watch, watchEffect } from` `'vue'`<br> `import Editor from` `'@tinymce/tinymce-vue'`<br> `import { key, plugins, toolbar, setting } from` `'./config'`<br> `export` `default` `{`<br> `name:` ` 'WmTinymce'``, `<br> `components: { Editor },`<br> `props: {`<br> `modelValue: {`<br> `type: String,`<br> ` default``: ` ` ''``, `<br> `},`<br> `readOnly: {`<br> `type: Boolean,`<br> ` default``: ` ` false``, `<br> `},`<br> `options: {`<br> `type: Object,`<br> ` default``() { `<br> `return` `{ plugins, toolbar }`<br> `},`<br> `},`<br> `name: {`<br> `type: String,`<br> ` default``: ` ` ''``, `<br> `},`<br> `},`<br> ` emits: [``'update:modelValue'``], `<br> `setup(props, { emit }) {`<br> `const tinymceData = ref(props.modelValue)` `// 编辑器数据`<br> `watch(`<br> `() => tinymceData.value,`<br> ` (data) => emit(``'update:modelValue'``, data) `<br> `)` `// 监听富文本输入值变动`<br> `return` `{`<br> `tinymceData,`<br> `}`<br> `},`<br> `}`<br></script> |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
vue3 子组件 update:modelValue 不生效问题
用 event 去做绑定
| 1 | <``ChildComponent :title=“title” @update:title = “title = $event” /> |
|---|
也就是加上 @update:title = “title = $event” 测试成功
总结
到此这篇关于 vue3 中 update:modelValue 的使用与不生效问题解决的文章就介绍到这了,更多相关 vue3 update:modelValue 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！