vue3中emit('update:modelValue')使用简单示例
更新时间:2022年09月22日 16:07:35 作者:白小白灬
这篇文章主要给大家介绍了关于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>
总结
到此这篇关于vue3中emit('update:modelValue')使用的文章就介绍到这了,更多相关vue3 emit('update:modelValue')使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
这篇文章主要介绍了Vue使用路由钩子拦截器beforeEach和afterEach监听路由,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11vue+jquery+lodash实现滑动时顶部悬浮固定效果
这篇文章主要为大家详细介绍了vue+jquery+lodash实现滑动时顶部悬浮固定效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2018-04-04VUE项目启动没有问题但代码中script标签有蓝色波浪线标注
这篇文章主要给大家介绍了关于VUE项目启动没有问题但代码中script标签有蓝色波浪线标注的相关资料,文中将遇到的问题以及解决的方法介绍的非常详细,需要的朋友可以参考下2023-05-05Vue + element 实现多选框组并保存已选id集合的示例代码
这篇文章主要介绍了Vue + element 实现多选框组并保存已选id集合,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
最新评论