手机彩票网:vue如何封装组件 vue封装组件方法

首先,利用vue官方提供的cli(3.x)生成一个Vue工程,具体的cli安装和生成工程的过程可以参考官网Vue CLI的章节。看下生成的vue工程结构,如下

可以看到工程中有个APP.vue,这是整个工程*顶端的组件,之后所有新开发的组件都是嵌套在这个组件中。

从App.vue中可以看出,组件分为三个部分

1.  template : 这是html部分,负责组件的展示

2.  script : 这是js部分,负责组件的逻辑

3.  style : 这是css部分,负责组件的渲染

一般所有的组件都带有这三部分


现在我们来写一个自己的组件Demo.vue, 可以看出该组件仅仅是一个黑边框的粉红色方块,长宽均为100px

那在App.vue里怎么使用Demo.vue呢,首先我们在App.vue的js模块用import语句导入进来,然后在components节点将Demo.vue进行注册,接下来就可以在App.vue的任何地方使用Demo.vue组件了。

接下来,我们先启动服务,查看结果,组件展现正确。

爱游戏体育官网爱游戏体育官网爱游戏体育官网爱游戏体育官网爱游戏体育官网

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注