vue3中update:modelValue的使用與不生效問題解決

更新時(shí)間：2022年03月31日 11:00:29 作者：淡淡的蘆葦

現(xiàn)在vue3的使用越來越普遍了,vue3這方面的學(xué)習(xí)我們要趕上,下面這篇文章主要給大家介紹了關(guān)于vue3中update:modelValue的使用與不生效問題的解決方法,需要的朋友可以參考下

v-model中update:modelValue

v-model的主要原因是由于value和input事件可能另有它用，那么我們可不可以直接使用另外的屬性和方法，而不需要去通過model進(jìn)行定義。

vue3中就實(shí)現(xiàn)了這個(gè)功能，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="請(qǐng)編輯職能大類"
/>

子組件

<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) // 編輯器數(shù)據(jù)
      watch(
        () => tinymceData.value,
        (data) => emit('update:modelValue', data)
      ) // 監(jiān)聽富文本輸入值變動(dòng)
      return {
        tinymceData,
      }
    },
  }
</script>

vue3子組件update:modelValue不生效問題

用event去做綁定

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

也就是加上 @update:title = “title = $event” 測(cè)試成功

總結(jié)

到此這篇關(guān)于vue3中update:modelValue的使用與不生效問題解決的文章就介紹到這了,更多相關(guān)vue3 update:modelValue使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: