介绍函数式组件
//,使用,& lt; dynamic-heading>,组件,负责提供适当的标题,(即:h2、h3、h4等等),在,2. x 中,这可能是作为单个文件组件编写的://,Vue 2,函数式组件示例
export default {
,功能:没错,
道具:大敌;[& # 39;水平# 39;],
,呈现(h,,{,道具、数据,children }), {
,return h (h $ {props.level},,数据,儿童)
,}
}//,Vue 2,函数式组件示例使用,& lt; template>
& lt; template functional>
& lt;组件
,:=癶 $ {props.level} ',
,v-bind=癮ttrs"
,v=發isteners"
,/比;
& lt;/template>
& lt; script>
export default {
道具:大敌;[& # 39;水平# 39;】
}
& lt;/script> //, vue3.0
{},h import 得到& # 39;vue # 39;
const DynamicHeading =,(道具、,上下文),=祝辞,{
,return h (h $ {props.level},, context.attrs,, context.slots)
}
时间=DynamicHeading.props [& # 39;水平# 39;】
export default DynamicHeading//,vue3.0单文件写法
& lt; template>
& lt;组件
,v-bind:=癶 $ {$ props.level}’”;
,v-bind=癮ttrs"美元;
,/比;
& lt;/template>
& lt; script>
export default {
道具:大敌;[& # 39;水平# 39;】
}
& lt;/script> functional attribute 在,& lt; template>,中移除
listeners 现在作为,attrs 美元的一部分传递,可以将其删除 异步组件的写法与defineAsyncComponent方法
//, vue2.x//,以前异步组件是通过将组件定义为返回承诺的函数来创建
const asyncPage =,(),=祝辞,进口(& # 39;。/NextPage.vue& # 39;)//,或者以选项方式创建
const asyncPage =, {
组件:大敌;(),=祝辞,进口(& # 39;。/NextPage.vue& # 39;),
200年,延迟:
3000年,超时:
错误:大敌;ErrorComponent,
,加载:LoadingComponent
}//vue3.x
在vue3.x中,需要使用defineAsyncComponent来定义
进口{,defineAsyncComponent },得到& # 39;vue # 39;
import ErrorComponent 得到& # 39;。/组件/ErrorComponent.vue& # 39;
import LoadingComponent 得到& # 39;。/组件/LoadingComponent.vue& # 39;//,不带选项的定义方法
const asyncPage =, defineAsyncComponent((),=祝辞,进口(& # 39;。/NextPage.vue& # 39;))//,带选项的异步组件
时间=constasyncPageWithOptions defineAsyncCopmonent ({
,加载程序:(),=祝辞,进口(& # 39;。/NextPage.vue& # 39;),
200年,延迟:
3000年,超时:
,errorComponent: errorComponent,
,LoadingComponent: LoadingComponent
}) //, vue2.x
const oldAsyncComponent =,(解决,,拒绝),=祝辞,{}//vue3.x
const asyncComponent =, defineAsyncComponent((),=祝辞,new 承诺((解决,,拒绝),=祝辞,{})) 组件事件需要在发出选项中声明
& lt; !——, vue2.x ——比;
& lt; template>
,& lt; div>
,& lt; p> {{, text }} & lt;/p>
,& lt; button v:点击=懊涝⒊?& # 39;接受# 39;)“祝辞OK
,& lt;/div>
& lt;/template>
& lt; script>
,export default {
道具:大敌;[& # 39;文本# 39;】
,}
& lt;/script>
& lt; !——, vue3.x ——比;
& lt; !——,现在和道具类似,可以用发出来定义组件发出的事件,——比;
& lt; !——,这个选项还接收已给对象,用来向道具一样对传递的参数进行验证,——比;
& lt; !——,强烈建议记录下每个组件发出的所有发出,因为去掉了.native修饰符,未使用声明的事件的所有监听器都将包含在组建的attr中美元,默认情况下,该监听器将绑定到组件的根节点,——比;
& lt; template>
,& lt; div>
,& lt; p> {{, text }} & lt;/p>
,& lt; button v:点击=懊涝⒊?& # 39;接受# 39;)“祝辞OK
这篇文章主要介绍”如何变更vue3中组件的非兼容”,在日常操作中,相信很多人在如何变更vue3中组件的非兼容问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“如何变更vue3中组件的非兼容”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
函数式组件
功能属性在单文件组件(证监会)& lt; template>已被移除
{功能:真}选项在通过函数创建组件已被移除
现在在Vue 3中,所有的函数式组件都是用普通函数创建的,换句话说,不需要定义{功能:真}组件选项。
他们将接收两个参数:道具和context.context参数是一个对象,包含组件的attrs,插槽,和排放性质。
此外,现在不是在渲染函数中隐式提供h,而是全局导入h。
使用前面提到的& lt; dynamic-heading>组件的示例,下面是它现在的样子。
主要区别在于
异步组件的写法与defineAsyncComponent方法
现在使用defineAsyncComponent助手方法,用于显示的定义异步组件
组件选项重命名为装载机
装载机函数本身不再接受解决和rejuct参数,必须返回一个承诺
装载机函数不再接收解决和拒绝参数,且必须始终返回承诺
组件事件需要在发出选项中声明
vue3中现在提供了一个发出选项,类似道具选项
此选项可以用于定义组件向其父对象发出的事件
