vue2.0中组建里面套用组件_vue中组件的3种使用方式详解

前言

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

在vue angular react三大前端框架的大前端时代。许多人选择了vue，在 github 上的star，vue已经超过react的数量了。虽然star并不能代表vue更强，不过在发展速度上看来，vue确实很快。

在模块化的前端时代，万物皆组件，vue学习组件是必不可少的。

可是在大多数人熟悉了纯html、jq之后，在初次接触vue的组件时候，却是满脸蒙蔽。

今天咱们以最简单的方式，带vue小白童鞋们，步入组件的世界~

咱们今天讲三种组件使用方式

基本组件

全局组件

构造组件

1. 基本组件四步骤

写好组件(废话~)

在页面种引用组件

在components中声明组件

在页面上使用

咱们以一个button子组件为例

项目src结构：

组件一般都放在components文件夹下：

1.写好子组件：

export default {

// 传入子组件的参数写到props

props: {

color: {

type: String, // 颜色参数类型

default: "#000" // 默认黑色

}

}

}

.btn {

width: 110px;

height: 60px;

border-radius: 10px;

border: none;

font-size: 15px;

}

2.3.4.父组件：

我是插槽的值

// 2. 在页面种引用组件