vue3 emit('update:modelValue')使用
白小白灬 人气:0父
<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>
总结
加载全部内容