详解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+Element实现增删改查的示例源码
Nov 23 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 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 404错误页面实现代码
2009/06/22 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python实现求数列和的方法示例
2018/01/12 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
java字符串格式化输出实例讲解
2021/01/06 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
工商企业管理应届生求职信
2014/05/04 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
2014年帮扶工作总结
2014/11/26 职场文书