详解vue3中组件的非兼容变更


Posted in Vue.js onMarch 03, 2021

函数式组件

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

// 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h1,h2,h3,等等),在 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.0
import { 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.x
const oldAsyncComponent = (resolve, reject) => {}
// vue3.x
const 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中组件的非兼容变更的详细内容,更多关于vue3中组件的非兼容变更的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 #Vue.js
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
You might like
PHP实现分页的一个示例
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
使用node.js 制作网站前台后台
2014/11/13 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Python中实现结构相似的函数调用方法
2015/03/10 Python
python 两个数据库postgresql对比
2019/10/21 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
人事部主管岗位职责
2013/12/26 职场文书
入党积极分子介绍信
2014/01/17 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
服装店营销方案
2014/03/10 职场文书
现场施工员岗位职责
2015/04/11 职场文书
员工考勤管理制度
2015/08/06 职场文书
浅析Django接口版本控制
2021/06/26 Python