技术笔记:Vue3之emits

简介: 技术笔记:Vue3之emits

emits:Vue3中emits类比于Vue2的props,也是传值,但是Vue2props不能声明事件,Vue3emits可以声明事件


//Vue2


{ { text }}


OK


export default {


props: 【'text'】


}


//Vue3


{ { text }}


OK


export default {


props: 【'text'】,


emits: 【'accepted'】


}


这里要注意,Vue3组件可以没有根元素,但是在组件的组件内触发事件时,如果为多个代码片段,没有根元素包裹,会产//代码效果参考:http://www.jhylw.com.cn/310229269.html

生警告,需要对事件定义emits 

//警告代码


确认


setup(){


emit("change", showAddress.value && showAddress.value.id);


}


//修改代码1


确认


setup(){


emit("change", showAddress.value && //代码效果参考:http://www.jhylw.com.cn/543432585.html

showAddress.value.id);

}


//修改代码2


确认


emits: 【"change"】,


setup(){


emit("change", showAddress.value && showAddress.value.id);


}

相关文章
|
1天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
8 2
|
1天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
7 2
|
1天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
8 1
|
1天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
9 1
|
1天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
5 1
|
1天前
|
JavaScript API
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
9 1
|
1天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
8 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
1天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
4 0
|
1天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
6 0
|
1天前
手写 vue3 的 ref,reactive 和 watchEffect
手写 vue3 的 ref,reactive 和 watchEffect
7 0