vue中的自定义组件

vue中的自定义组件

vue中的自定义组件，如果单纯只是使用组件，不改变样式和执行事件。一般的步骤是：

第一步：定义好组件

第二步：引用组件文件路径

第三步：注册组件

第四步：使用组件

文件结构

第一步：找到components文件，在下面创建一个vue文件，在vue文件里面创建模板和进行组件定义。

图一

第二步：需要引用组件的地方（比如demo7的index.vue中）使用import引用文件。

第三步：在下面图中components里面注册组件。

第四步：如图使用自定义的timer组件。

图二

有两个有意思的扩展点：

①比如，我想给组件定义一个颜色属性。组件在第一个地方使用是红色，第二个地方是蓝色。

使用图一中的props属性，自己定义一个属性col，给他设置默认值。然后图二中在组件使用。

②比如，我想在时间是30秒的时候，执行事件。需要使用图一的$emit("xxx")自定义事件，然后在图二中对定义的事件进行封装。

手下留赞！！！