vue3 兼容,vue兼容问题
这篇文章主要介绍了详解vue3中组件的非兼容变更，帮助大家更好的理解和学习使用某视频剪辑软件框架，感兴趣的朋友可以了解下
目录
函数式组件异步组件的写法与定义组件方法组件事件需要在发出选项中声明
函数式组件
功能属性在单文件组件(证监会)模板已被移除
{ functional: true }选项在通过函数创建组件已被移除
//使用动态航向组件，负责提供适当的标题（即：h1、h2、h3、等等),在2.x中，这可能是作为单个文件组件编写的：
//Vue 2函数式组件示例
导出默认值{
功能性：真的，
道具：[等级],
render(h，{ props，data，children }) {
返回h(`h${props.level} `)，数据，子级)
}
}
//Vue 2函数式组件示例使用模板
模板功能
成分
:is=`h${props.level} `
v-bind=attrs
v-on=listeners
/
/模板
脚本
导出默认值{
道具：[关卡]
}
/脚本
现在在Vue 3中，所有的函数式组件都是用普通函数创建的，换句话说，不需要定义{ functional: true }组件选项。
他们将接收两个参数：道具和背景。语境参数是一个对象，包含组件的属性，插槽，和发出属性。
此外，现在不是在提出函数中隐式提供h，而是全局导入h。
使用前面提到的动态航向组件的示例，下面是它现在的样子。
//vue3.0
从“vue”导入{ h }
const DynamicHeading=(props，context)={
返回h(`h${props.level} `，context.attrs，context.slots)
}
DynamicHeading.props=[level]
导出默认动态缓存
//vue3.0单文件写法
模板
成分
v-bind:is=`h${$props.level} `
v-bind=$attrs
/
/模板
脚本
导出默认值{
道具：[关卡]
}
/脚本
主要区别在于
功能属性在模板中移除
听众现在作为$attrs的一部分传递，可以将其删除
异步组件的写法与defineAsyncComponent方法
现在使用定义组件助手方法，用于显示的定义异步组件
成分选项重命名为装货设备
装货设备函数本身不再接受分解和重新判断参数，必须返回一个承诺
//vue2.x
//以前异步组件是通过将组件定义为返回承诺的函数来创建
const asyncPage=()=import( ./下一页。vue’)
//或者以选项方式创建
const asyncPage={
组件：()=导入(。/下一页。vue’)，
延时：200,
超时：3000,
错误：错误组件，
加载：加载组件
}
//vue3.x
在vue3.x中，需要使用定义组件来定义
从“vue”导入{ defineAsyncComponent }
从""导入错误组件 components/ErrorComponent.vue
从导入正在加载组件./components/正在加载组件。vue
//不带选项的定义方法
const async page=defineasync component(()=import( ./NextPage.vue ))
//带选项的异步组件
constasyncpagewithpoptions=defineasynccomponent({
loader: ()=import(./下一页。vue’)，
延时：200,
超时：3000,
错误组件：错误组件，
加载组件：加载组件
})
装货设备函数不再接收分解和拒绝参数，且必须始终返回承诺
//vue2.x
const oldAsyncComponent=(resolve，reject)={}
//vue3.x
const async component=defineasync component(()=new Promise((resolve，reject)={}))
组件事件需要在emits选项中声明
vue3中现在提供了一个发出选项，类似小道具选项
此选项可以用于定义组件向其父对象发出的事件
！- vue2.x -
模板
差异
p{{ text }}/p
按钮v-on:单击=$emit(accepted )确定/按钮
/div
/模板
脚本
导出默认值{
道具：[文本]
}
/脚本
！- vue3.x -
！-现在和支柱类似，可以用发出来定义组件发出的事件-
！-这个选项还接收已给对象，用来向小道具一样对传递的参数进行验证-
！-强烈建议记录每个组件发出的所有发出，因为。移除了native修饰符，所有未声明的事件侦听器都将包含在构建的$attr中。默认情况下，这个侦听器将绑定到组件的根节点-
模板
差异
p{{ text }}/p
按钮v-on:单击=$emit(accepted )确定/按钮
/div
/模板
脚本
导出默认值{
道具：[text]，
发出：[已接受]
}
/脚本
这就是vue3中组件不兼容变化的细节。更多关于vue3中组件不兼容变化的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。