vue3中emit('update:modelValue')使用簡單示例

更新時(shí)間：2022年09月22日 16:07:35 作者：白小白灬

這篇文章主要給大家介紹了關(guān)于vue3中emit('update:modelValue')使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

父

<template>
  <TestCom v-model="test1" v-model:test2="test2"></TestCom>
  <h1>{{test1}}測試1</h1>
  <h1>{{test2}}測試2</h1>
</template>

<script setup>
import { ref, reactive } from 'vue'
const test1 = ref('')
const test2 = ref('')
</script>

子（setup語法糖）

<template>
	<input v-model="message" @input="changeInfo(message)" />
	<input v-model="message2" @input="changeInfo2(message2)" />
</template>
<script setup>
import { ref, watch } from 'vue';
// 此處引入
const emit = defineEmits(['update:modelValue', 'update:test2'])
const props = defineProps({
	// 父組件 v-model 沒有指定參數(shù)名，則默認(rèn)是 modelValue
	modelValue:{ 
		type:String,
		default: 'test'
	},
	test2: {
		type: String,
		default: 'aaa'
	}
})

let message = ref('123')
let message2 = ref('456')
// 因?yàn)閜rops.modelValue、props.test2是非引用類型，改變時(shí)，需要監(jiān)聽，對響應(yīng)式數(shù)據(jù)重新賦值
watch(()=> props.modelValue,() => {message.value = props.modelValue})
watch(()=> props.test2,() => {message2.value = props.test2})
// 數(shù)據(jù)雙向綁定
const changeInfo = (info) => {
	emit('update:modelValue', info)
}
const changeInfo2 = (info2) => {
	emit('update:test2', info2)
}
</script>

子（常規(guī)寫法）

<script>
import { ref, watch } from 'vue';
export default {
	props: {
		// 父組件 v-model 沒有指定參數(shù)名，則默認(rèn)是 modelValue
		modelValue:{
			type:String,
			default: 'test'
		},
		test2: {
			type: String,
			default: 'aaa'
		}
	},
	setup(props, { emit }) {
		let message = ref('123')
		let message2 = ref('456')
		// 因?yàn)閜rops.modelValue、props.test2是非引用類型，改變時(shí)，需要監(jiān)聽，對響應(yīng)式數(shù)據(jù)重新賦值
		watch(()=> props.modelValue,() => {message.value = props.modelValue})
		watch(()=> props.test2,() => {message2.value = props.test2})
		// 數(shù)據(jù)雙向綁定
		const changeInfo = (info) => {
			emit('update:modelValue', info)
		}
		const changeInfo2 = (info2) => {
			emit('update:test2', info2)
		}
		return {
			message, message2, changeInfo, changeInfo2
		}
	}
}
</script>

補(bǔ)充：項(xiàng)目中使用富文本編輯器數(shù)據(jù)問題父組件

 <wm-tinymce
  ref="editor"
  v-model="data.introduction"
/>

子組件

<template>
  <div class="tinymce-container">
    <editor
      v-model="tinymceData"
      :api-key="key"
      :init="tinymceOptions"
      :name="tinymceName"
      :readonly="tinymceReadOnly"
    />
  </div>
</template>

<script>
  import { ref, watch, computed, onMounted } from 'vue'

  import tinymce from 'tinymce/tinymce'
  import { setupPreview, setupWmPreview, setupIndent2em } from './plugins'
  import { key, plugins, toolbar, setting } from './config'

  import Editor from '@tinymce/tinymce-vue'
  import Modal from './modal/index.vue'

  export default {
    name: 'WmTinymce',
    components: {
      Editor,
    },
    props: {
      modelValue: {
        type: String,
        default: '',
      },
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      
      const tinymceData = ref(props.modelValue) // 編輯器數(shù)據(jù)

      watch(
        () => props.modelValue,
        (d) => (tinymceData.value = d)
      )
      watch(
        () => tinymceData.value,
        (data) => emit('update:modelValue', data)
      ) // 監(jiān)聽富文本輸入值變動(dòng)


      return {
        tinymceData,
      }
    },
  }
</script>

總結(jié)

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

您可能感興趣的文章: