成都网站建设设计

将想法与焦点和您一起共享

总结Vue3常见组件定义方式,我竟写出来了个bug……

一、component方式

import {createApp, h} from 'vue'
app.component('test-component', {
data() {
return {
count: 10
}
},
render() {
return h('h1', `测试${this.count}`);
}
});

// 使用:直接在所需要调用的位置直接调用该组件即可



注意:此处有一个位置没有搞懂,文档中表示可以直接调用template选项,但是我按照规范书写后内容并没有正常渲染,希望对该部分有研究的老铁可以给我指点迷津。(测试代码如下所示)

站在用户的角度思考问题,与客户深入沟通,找到杭锦后网站设计与杭锦后网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册虚拟主机、企业邮箱。业务覆盖杭锦后地区。

app.component('test-error', {
template: `

Error!

`
});

// 使用(未正常渲染出来,由于自己对源码部分研究较少,目前还未找到具体原因)



通过该种方式还可以将第三方组件注入到全局中,从而使该组件能够在别的位置直接使用,以导出Element Plus中的某些组件为例,注入到全局后可以在单文件组件中直接使用。

import {ElButton} from "element-plus";

const components = [
ElButton
];

export default {
install: app => {
components.forEach(component => {
app.component(component.name, component);
});
}
};

// 使用该插件
app.use(插件名);

// 使用该组件
test



二、Vue3.x的setup选项方式

setup函数是一个新的组件选项,是组件内部使用组合式API的入口点,使用该方式就像使用Vue2.x一样简单,仅仅是增加了一个选项,下面来看看如何用该方式定义一个组件:






三、Vue3.x的





新闻名称:总结Vue3常见组件定义方式,我竟写出来了个bug……
网站路径:http://chengdu.cdxwcx.cn/article/cdepgee.html