Vue 自定义组件

@[TOC]Vue 自定义组件

什么是组件

组件是可复用的 Vue 实例，且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应对的组件即可。

组件化和模块化的区别

• 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的只能单一；
• 组件化：是从 UI 界面的角度进行划分的；前端的组件化，方便 UI 组件的重用。

定义全局组件的三种方式

1. 使用 Vue.extend 创建全局的 Vue 组件：
   1.1 使用 Vue.extend 创建全局组件；
   1.2 使用 Vue.component (‘组件的名称’,创建出来的组件模板对象)；
   1.3 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引用到页面中；

注意：如果使用 Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写字母，同时两个单词之间使用 短横线（-）连接

Vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签形式来引入它的；
第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的 HTML 内容；

<div id='app'>
<!--3.如果要使用组件，直接把组件的名称以 HTML 标签的形式，引用到页面中-->
	<mycom1></mycom1>
</div>

//1.使用 Vue.extend 创建全局组件
var com1 = Vue.extend({
   
	template:'<h3>Vue.extend</h3>'
})
//2.使用 Vue.component('组件的名称',创建出来的组件模板对象)
Vue.component('mycom1',com1)
//如果不使用驼峰，则直接拿名称来使用即可
var vm = new Vue({
   
	el:'#app',
	data:{
   },
	methods:{
   }
})

通过 template 属性，指定组件要展示的 HTML 结构。

2. 直接使用 Vue.component 方法：

<div id='app'>
<!--如果要使用组件，直接把组件的名称以 HTML 标签的形式，引用到页面中-->
	<mycom2></mycom2>
</div>

//使用 Vue.component('组件的名称',组件模板对象)，第二个参数直接传入 对象字面量
Vue.component('mycom2',{
   
	template:'<h3>Vue.component</h3>'
})

var vm = new Vue({
   
	el:'#app',
	data:{
   },
	methods:{
   }
})

3. 将模板字符串，定义到 script 标签中：
   在被控制的 #app 外面，使用 template 元素，定义组件的 HTML 模板结构。
   注：template 元素是 Vue 实例提供的标签

<div id='app'>
	<mycom3></mycom3>
</div>
<template id="tmpl">
	<div><!--必须有一个根元素-->
		<h3>template Element</h3>
	</div>