vue3中emit('update:modelValue')使用简单示例

<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 没有指定参数名,则默认是 modelValue
	modelValue:{ 
	type:String,
	default: 'test'
	},
	test2: {
	type: String,
	default: 'aaa'
	}
})

let message = ref('123')
let message2 = ref('456')
// 因为props.modelValue、props.test2是非引用类型,改变时,需要监听,对响应式数据重新赋值
watch(()=> props.modelValue,() => {message.value = props.modelValue})
watch(()=> props.test2,() => {message2.value = props.test2})
// 数据双向绑定
const changeInfo = (info) => {
	emit('update:modelValue', info)
}
const changeInfo2 = (info2) => {
	emit('update:test2', info2)
}
</script>

子(常规写法)

<script>
import { ref, watch } from 'vue';
export default {
	props: {
	// 父组件 v-model 没有指定参数名,则默认是 modelValue
	modelValue:{
	type:String,
	default: 'test'
	},
	test2: {
	type: String,
	default: 'aaa'
	}
	},
	setup(props, { emit }) {
	let message = ref('123')
	let message2 = ref('456')
	// 因为props.modelValue、props.test2是非引用类型,改变时,需要监听,对响应式数据重新赋值
	watch(()=> props.modelValue,() => {message.value = props.modelValue})
	watch(()=> props.test2,() => {message2.value = props.test2})
	// 数据双向绑定
	const changeInfo = (info) => {
	emit('update:modelValue', info)
	}
	const changeInfo2 = (info2) => {
	emit('update:test2', info2)
	}
	return {
	message, message2, changeInfo, changeInfo2
	}
	}
}
</script>

补充:项目中使用 富文本编辑器数据问题 父组件

<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) // 编辑器数据

 watch(
 () => props.modelValue,
 (d) => (tinymceData.value = d)
 )
 watch(
 () => tinymceData.value,
 (data) => emit('update:modelValue', data)
 ) // 监听富文本输入值变动


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

总结

作者:白小白灬原文地址:https://blog.csdn.net/l2345432l/article/details/126017725

%s 个评论

要回复文章请先登录注册