返回顶部
首页 > 资讯 > 精选 >如何变更vue3中组件的非兼容
  • 672
分享到

如何变更vue3中组件的非兼容

2023-06-06 17:06:24 672人浏览 八月长安
摘要

这篇文章主要介绍“如何变更vue3中组件的非兼容”,在日常操作中,相信很多人在如何变更Vue3中组件的非兼容问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何变更vue3中组件的非兼容”的疑惑有所帮助!接下来

这篇文章主要介绍“如何变更vue3中组件的非兼容”,在日常操作中,相信很多人在如何变更Vue3中组件的非兼容问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何变更vue3中组件的非兼容”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

函数式组件

functional attribute 在单文件组件 (SFC) <template> 已被移除
{ functional: true } 选项在通过函数创建组件已被移除

// 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h2,h3,h4,等等),在 2.x 中,这可能是作为单个文件组件编写的:// Vue 2 函数式组件示例export default { functional: true, props: ['level'], render(h, { props, data, children }) { return h(`h${props.level}`, data, children) }}// Vue 2 函数式组件示例使用 <template><template functional> <component :is="`h${props.level}`" v-bind="attrs" v-on="listeners" /></template><script>export default { props: ['level']}</script>

现在在 Vue 3 中,所有的函数式组件都是用普通函数创建的,换句话说,不需要定义 { functional: true } 组件选项。
他们将接收两个参数:props 和 context。context 参数是一个对象,包含组件的 attrs,slots,和 emit property。
此外,现在不是在 render 函数中隐式提供 h,而是全局导入 h。
使用前面提到的 <dynamic-heading> 组件的示例,下面是它现在的样子。

// vue3.0import { h } from 'vue'const DynamicHeading = (props, context) => { return h(`h${props.level}`, context.attrs, context.slots)}DynamicHeading.props = ['level']export default DynamicHeading// vue3.0单文件写法<template> <component v-bind:is="`h${$props.level}`" v-bind="$attrs" /></template><script>export default { props: ['level']}</script>

主要区别在于

functional attribute 在 <template> 中移除listeners 现在作为 $attrs 的一部分传递,可以将其删除

异步组件的写法与defineAsyncComponent方法

现在使用defineAsyncComponent助手方法,用于显示的定义异步组件
component选项重命名为loader
Loader函数本身不再接受resolve和rejuct参数,必须返回一个Promise

// vue2.x// 以前异步组件是通过将组件定义为返回Promise的函数来创建const asyncPage = () => import('./NextPage.vue')// 或者以选项方式创建const asyncPage = { component: () => import('./NextPage.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadinGComponent}// vue3.x在vue3.x中,需要使用defineAsyncComponent来定义import{ defineAsyncComponent } from 'vue'import ErrorComponent from './components/ErrorComponent.vue'import LoadingComponent from './components/LoadingComponent.vue'// 不带选项的定义方法const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))// 带选项的异步组件constasyncPageWithOptions = defineAsyncCopmonent({ loader: () => import('./NextPage.vue'), delay: 200, timeout: 3000, errorComponent: ErrorComponent, LoadingComponent: LoadingComponent})

loader函数不再接收resolve和reject参数,且必须始终返回Promise

// vue2.xconst oldAsyncComponent = (resolve, reject) => {}// vue3.xconst asyncComponent = defineAsyncComponent(() => new Promise((resolve, reject) => {}))

组件事件需要在emits选项中声明

vue3中现在提供了一个emits选项,类似props选项
此选项可以用于定义组件向其父对象发出的事件

<!-- vue2.x --><template> <div> <p>{{ text }}</p> <button v-on:click="$emit('accepted')">OK</button> </div></template><script> export default { props: ['text'] }</script><!-- vue3.x --><!-- 现在和prop类似,可以用emits来定义组件发出的事件 --><!-- 这个选项还接收已给对象,用来向props一样对传递的参数进行验证 --><!-- 强烈建议记录下每个组件发出的所有emits,因为去掉了.native修饰符,未使用声明的事件的所有监听器都将包含在组建的$attr中,默认情况下,该监听器将绑定到组件的根节点 --><template> <div> <p>{{ text }}</p> <button v-on:click="$emit('accepted')">OK</button> </div></template><script> export default { props: ['text'], emits: ['accepted'] }</script>

到此,关于“如何变更vue3中组件的非兼容”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: 如何变更vue3中组件的非兼容

本文链接: https://lsjlt.com/news/248070.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何变更vue3中组件的非兼容
    这篇文章主要介绍“如何变更vue3中组件的非兼容”,在日常操作中,相信很多人在如何变更vue3中组件的非兼容问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何变更vue3中组件的非兼容”的疑惑有所帮助!接下来...
    99+
    2023-06-06
  • 详解vue3中渲染函数的非兼容变更
    目录渲染函数API变更 Render函数参数 渲染函数签名更改VNode Props 格式化slot统一 移除$listeners $attrs现在包括class和styl...
    99+
    2024-04-02
  • vue3中非父子组件如何传值
    小编给大家分享一下vue3中非父子组件如何传值,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为。vu...
    99+
    2023-06-22
  • 详解vue3中的非父子组件传值
    目录App.vuesub1.vuesub2.vue总结 vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行...
    99+
    2024-04-02
  • vue3 hook如何重构DataV的全屏容器组件
    今天小编给大家分享一下vue3 hook如何重构DataV的全屏容器组件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-07-06
  • Vue中的非单文件组件如何使用
    本篇内容介绍了“Vue中的非单文件组件如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一,什么是组件实现应用中局部功能代和资源的集合(...
    99+
    2023-07-05
  • Vue3中如何使用defineCustomElement定义组件
    本篇内容主要讲解“Vue3中如何使用defineCustomElement定义组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3中如何使用defineCustomElement定义组件”...
    99+
    2023-07-04
  • Win8程序不兼容怎么查看?兼容中心是如何确定程序的兼容性
    Win8对于投入运营不长时间的系统来说,存在系统和软件的兼容性问题是很常见的。毕竟,之前的系统Win7和Xp系统,由于普及率较高,许多程序和软件都是根据他们进行开发的。所以,现在的系统存在很大的兼容性问题。...
    99+
    2022-06-04
    程序 兼容性 不兼容
  • React中如何传入组件的props改变时更新组件的几种实现方法
    这篇文章将为大家详细讲解有关React中如何传入组件的props改变时更新组件的几种实现方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。何时使用派生状态咱们先来看一个比...
    99+
    2024-04-02
  • Angular中非父子组件间是如何通讯的
    本篇内容介绍了“Angular中非父子组件间是如何通讯的”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!其实...
    99+
    2024-04-02
  • vue中如何实现非父子组件的通信
    这篇文章主要介绍了vue中如何实现非父子组件的通信,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、Provide和InjectProvide和Inject用于非父子组件之间...
    99+
    2023-06-29
  • Vue3组件更新中的DOM diff算法示例详解
    目录同步头部节点同步尾部节点添加新的节点删除多余节点处理未知子序列移动子节点建立索引图更新和移除旧节点移动和挂载新节点最长递增子序列总结总结在vue的组件更新过程中,新子节点数组相对...
    99+
    2024-04-02
  • vuex如何在非组件中调用mutations方法
    目录在非组件中调用mutations方法在组件中调用在非组件中调用vuex的mutations属性mutations属性介绍对象风格的提交方式使用常量替代 Mutation 事件类型...
    99+
    2024-04-02
  • ASP 文件是如何与 Laravel 框架兼容的?
    ASP(Active Server Pages)是一种基于服务器端的脚本语言,与PHP和Laravel框架类似,可用于动态网站开发。在ASP中,我们可以使用VBScript或JavaScript编写代码,然后将其嵌入到HTML页面中。虽然...
    99+
    2023-09-01
    文件 laravel 框架
  • Vue3组件库的环境如何配置
    这篇文章主要讲解了“Vue3组件库的环境如何配置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3组件库的环境如何配置”吧!因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所...
    99+
    2023-07-06
  • vue3的动态组件是如何工作的
    目录一、组件注册 1.1 全局注册 1.2 注册全局组件的过程 1.3 应用挂载的过程 二、动态组件 2.1 绑定字符串类型 2.2 绑定对象类型 三、阿宝哥有话说 3.1 除了 c...
    99+
    2024-04-02
  • vue3中addRoute路由变化但页面未更新如何解决
    解决办法,每次addRoute时 深复制组件对象import time from "../views/time" function copyObj(obj) { if (typeof obj == "o...
    99+
    2023-05-20
    Vue3 addroute
  • vue如何观察组件中的任何内容
    这篇文章主要为大家展示了“vue如何观察组件中的任何内容”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何观察组件中的任何内容”这篇文章吧。观察组件中的任何内容你的组件中的任何响应都可以被...
    99+
    2023-06-27
  • Vue3中如何修改父组件传递到子组件中的值(全网少有!)
    目录Vue3中修改父组件传递到子组件中的值自定义组件上使用v-model总结:Vue3中修改父组件传递到子组件中的值 1.大家都知道,vue是具有单向数据流的传递特性。当你在子组件中...
    99+
    2023-05-16
    vue修改父组件传过来的值 vue子组件修改父组件传来的值 vue 父组件修改子组件数据
  • 如何取消excel中的兼容性检查
    取消excel中的兼容性检查的方法:1、打开Excel文件;2、进入“文件”选项卡;3、选择“选项”;4、进入“兼容性中心”;5、选择“取消兼容性检查”;6、保存并关闭文件即可。在处理Excel文件时,我们有时会遇到兼容性问题。这些问题可能...
    99+
    2023-07-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作