前言:说下vue终端的组件组件,然后搭个头部组件实现复用。
GitHub:https://github.com/Ewall1106/mall
官方解读
- 官方怎么说的啊?
组件可以扩展HTML元素,封装可重用的代码,这句话中,记住可重用
这几个字是很重要的,一般来说这就是答案——即到底什么时候应该把一部分的代码抽离出来构成组件?
关于组件的命名
组件的命名我在项目中统一用驼峰式
来表示。组件的复用
可以将组件进行任意次数的复用,举个栗子如下图,每次点击按钮,每个组件都会各自独自维护它的count
,因为每用一次组件,就会有一个它的新实例被创建。
组件的运用
- 我们进入
components文件夹
里面新建一个myHeader.vue
组件,有helloworld.vue
的删掉或者直接改个名直接用都是可以的,好了,代码敲完了以后变成了这幅模样:
- 仔细看看上图,一个
myHeader.vue
的页面分为了三个部分:-
<template></template>
里面是放html代码的是为结构 -
<script></script>
里面写js是为逻辑 -
<style></style>
里些css是为样式,这就是vue里面的结构、样式、逻辑三者分离。
-
组件的引入
- ok,我们在
div
里面加个helloworld
便于展示:
- 然后在
home.vue
里面引入:
组件的复用
- 组件的复用就很简单了,写复制粘贴一下就行,记住,组件都是独立的。