vue中组件的定义方法

作用：
拆分Vue实例的代码，能够让我们以不同的组件来划分不同的功能模块，直接调用对应的组件即可 方便ui组件的重用
与模块化的区别：
模块化是从代码逻辑的角度进行划分的，代码的没一层结构就是一个模块，业务逻辑层，server层等
一般是后端，保证每个模块的职能单一
组件化是从ui界面的角度进行划分的，每一个单独的标签元素的模板就是一个组件
一般是前段，方便ui组件的重用
！！注意：在使用组件时，仍需要创建一个vue实例

1.创建方式

创建组件的方式一

1. 使用Vue.extend来创建全局的Vue组件

var 创建出来的组件模板对象=Vue.extend({
template:'<p>aaa </p>'
//！！！！！！template中的字符串必须为html格式
})

2. 使用Vue.componet来引入组件

Vue.componet('组件名称',创建出来的组件模板对象)

可以将第一步和第二部的代码合并起来

Vue.componet('组件名称',Vue.extend({
template:'<p>aaa </p>'
}))

组件名称若使用驼峰命名法的话，页面中要将-放在大写字母前，再将大写字母改为小写字母，建议使用全小写

3. 使用组件

<组件名称>
</组件名称>

Vue.extend({template:’’})创建出来的是一个模板对象
Vue.component(’’,{})是给模板对象命名
先创建模板对象，然后再命名，这是两个步骤

创建组件的方式二

方式一的简写

1. 直接使用Vue.component创建组件

Vue.component('组件名称'，{
template:'<p> </p>'
})

2. 使用组件

<组件名称>
</组件名称>

3. 使用template来创建组件的缺点
   只能有一个根元素，不能有两个以上的同级元素
   需要使用别的标签来包裹

创建组件的方式三

1. 使用template设置id

Vue.component('组件名称'，{
template:'#id'
})

2. 定义模板
   在Vue实例外的区域定义html模板

<template id="id">
</template>

这种方式有代码提示

3. 使用组件

<组件名称>
</组件名称>

创建组件的方式四

1. 创建一个.js文件

var ss='<p>aaa</p>'
export default ss
//或者
//export var ttt='<p>bbb</p>'

2. 接受对象

import ss from '.js文件路径'
//或者
//import {ttt as ss} from '.js文件路径'

3. 通过Vue.temponent创建组件

Vue.component('组件名称'，{
template:ss
//不用加引号
})

创建组件的方式五

使用.vue文件来创建组件
参考Vue中的.vue文件的使用

私有组件的创建方式

只有定义了该组件的Vue实例才能使用

1. 使用Vue实例中的components属性来创建自由组件

var vm =new Vue({
	el:'#app'
	componets:{
		组件名称:{
			template:'<p></p>'
		}
	}
})

！！！components属性是带s的
在私有的组件定义中，可以使用变量的简写方式
直接写入一个变量，组件名称为变量的名称

2. 使用组件

<div id="app">
	<组件名称>
	</组件名称>
</div>