vue3中emit(‘update:modelValue‘)使用

这篇具有很好参考价值的文章主要介绍了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>

子(常规写法)文章来源地址https://www.toymoban.com/news/detail-457573.html

<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>

到了这里,关于vue3中emit(‘update:modelValue‘)使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 组件v-model(.sync)记录使用(vue3)

    首先,让我们来了解一下Vue3中v-model的用法。在Vue3中, v-model 指令可以用于自定义组件上,用于实现组件的双向数据绑定。与Vue2中的 .sync 不同, Vue3中的v-model需要在组件中手动实现双向绑定逻辑。 下面是一个简单的父组件示例,展示了如何在Vue3中使用 v-model 来实现组件的双

    2024年01月19日
    浏览(43)
  • Vue3-在HTML标签、组件标签上使用v-model

    本篇为Vue3学习中遇到的v-model相关的记录,如有问题欢迎指正 v-model通常在input、select等标签上来实现数据双向绑定 原理 :v-model通过给标签value赋值来实现  数据—页面 的绑定。然后通过绑定input事件实现 页面—数据 的绑定。 原理 :在组件上时,v-model通过 :modelValue 来进行

    2024年01月24日
    浏览(59)
  • 【Vue技巧】Vue2和Vue3组件上使用v-model的实现原理

    ChatGPT4.0国内站点,支持GPT4 Vision 视觉模型:海鲸AI 在Vue中, v-model 是一个语法糖,用于在输入框、选择框等表单元素上创建双向数据绑定。当你在自定义组件中实现 v-model 功能时,你需要理解它背后的原理: v-model 实际上是一个属性和一个事件的简写。 在 Vue 2.x 中, v-mode

    2024年01月15日
    浏览(60)
  • vue项目中对组件使用v-model绑定值,在vue3中如何更新数据

    在el-form 中 el-form-item 绑定组件进行校验 想在表单下面爆红提示 可以对组件使用v-model绑定值 vue2 通过this.$emit(‘input’,value) 更新 v-model值 vue3 通过this.$emit(‘update:modelValue’ ,value) 更新 v-model值

    2024年02月15日
    浏览(54)
  • 面试官:只知道v-model是:modelValue和@onUpdate语法糖,那你可以走了

    我们每天都在用 v-model ,并且大家都知道在vue3中 v-model 是 :modelValue 和 @update:modelValue 的语法糖。那你知道 v-model 指令是如何变成组件上的 modelValue 属性和 @update:modelValue 事件呢?将 v-model 指令转换为 modelValue 属性和 @update:modelValue 事件这一过程是在编译时还是运行时进行的呢

    2024年03月26日
    浏览(42)
  • Vue3中v-model在原生元素和自定义组件上的使用

    目录 前言 一、原生元素上的用法 1. 输入框(input) 2. 多行文本域(textarea) 3. 单选按钮(radio) 4. 多选框(checkbox)  5. 下拉选择框(select)  二、自定义组件上的用法 1. 定义一个名为 modelValue 的 props 属性和一个名为 update:modelValue 的事件 2.使用一个可写的,同时具有 getter 和 setter

    2024年02月14日
    浏览(61)
  • 【vue3】vue3接收props以及emit的用法

    技术 :vue3.2.40 UI框架 :arco-design 2.44.7 css技术 :less 4.1.3 实现 :子组件接收props以及通过emit方法传值父组件 vue3使用的组合式API,我这里使用的是defineComponent 1.setup里如果需要接收props和使用emit,只需要带参数 setup(props, { emit }) 2.setup里面只需要带emit(‘handleCancel’),不需要带

    2024年02月15日
    浏览(35)
  • 父组件明明使用了v-model,子组件竟然可以不用定义props和emit抛出事件,快来看看吧

    vue3.4增加了 defineModel 宏函数,在子组件内修改了 defineModel 的返回值,父组件上 v-model 绑定的变量就会被更新。大家都知道 v-model 是 :modelValue 和 @update:modelValue 的语法糖,但是你知道为什么我们在子组件内没有写任何关于 props 的定义和 emit 事件触发的代码吗?还有在 template

    2024年04月08日
    浏览(80)
  • 【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法

    前言:不懂在父组件里对子组件 @xxxx 声明自定义事件,就不用看本篇文章了。本篇对此内容不做任何说明。这是与 emits 结合使用的必备知识! 场景说明: 组件功能封装:         组件封装了一系列 emit 事件,并返回数据、回调函数等,或单纯执行某个操作后,触发父组

    2023年04月09日
    浏览(53)
  • vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题

    参考文章 重构vue2项目时发现的问题,原始项目使用的是 Element-ui 。 其实vue3可以使用适配的 Element-plus 问题描述 el-form表单无法输入 控制台报错 Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 使用响应式变量时应先声明 解决办法

    2024年02月15日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包