当前位置: 首页 > 科技观察

总结了Vue3常用的组件定义方法,居然写了个bug...

时间:2023-03-16 23:44:39 科技观察

1.component方法可以通过app.component(name,Component)注册全局组件,这种方式注册的组件可以直接使用在任何子组件中调用,像这样:import{createApp,h}from'vue'app.component('test-component',{data(){return{count:10}},render(){returnh('h1',`Test${this.count}`);}});//使用:在需要调用的地方直接调用组件注意:这里有个地方没看懂,documentation是说可以直接调用template选项,但是我按照规范写了之后内容并没有正常渲染。希望研究过这部分的老手能指点一下。(测试代码如下)app.component('test-error',{template:`

Error!
`});//使用(没有正常渲染,由于本人对源码研究不多,所以暂时还没有找到具体原因)通过这种方式,也可以在全局注入第三方组件,从而使组件可以使用直接在其他地方,比如在ElementPlus中导出一些组件,注入全局后可以直接在单文件组件中使用。从“element-plus”导入{ElButton};constcomponents=[ElButton];exportdefault{install:app=>{components.forEach(component=>{app.component(component.name,component);});}};//使用插件app.use(插件名);//使用组件test二、Vue3.x的setup选项方法setup函数是新组件option,是组件内部使用的组合API的入口,使用这种方法和使用Vue2.x一样简单,只需要添加一个option,下面看看如何这样定义一个组件:3.你觉得Vue3.x的