组件的定义: 方便代码的书写,需要什么就将什么组件加入到自己的项目中去,更好的规范化项目结构(注意什么是组件化什么是模块化,一个是针对代码,一个是针对UI)
组件的创建三种方式:
1.使用Vue.extend来创建组件
var com1 = Vue.extend({
template:'<h1>这是创建组件的第一种方式</h1>'
})
Vue.component('myCom',com1)
2.不用创建变量直接创建组件
Vue.component('com1',Vue.extend({
template:'<h1>这是创建的第二种方式</h1>'
}))
3.直接创建方式
Vue.component('mycom',{
template:'<h1>这是直接创建方式</h1>'
})
4.使用外部模板创建方式
<mycom></mycom>
//模板
<template id='"com1">
<h1>这是使用的模板创建的</h1>
</template>
//先创建一个模板id
Vue.component('mycom',{
template:'#com1'
})
5.创建私有组件
在自己控制的div里面创建组件,然后再script外面创建组件,最后在控制区域写入自己的组即可
//1.自己的控制区域
components:{
login:{
template:"#com"
}
}
//2.在script外面创建模板
<template id="com">
<div>
<h1>这是模板创建的</h1>
</div>
</template>
//3.在最终的控制区域写入自己的模板即可
<login></login>
组件传值
首先创建自己的组件,自己的组件里面自己传值实例
// 1. 组件可以有自己的 data 数据
// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
// 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
Vue.component('com1',{
template:'<h1>这是自己的组件中的内容+++++{{msg}}</h1>',
data:function(){
return {
msg:'我是组件自己的内容'
}
}
})