组件分两种，全局组件和局部组件
全局组件这么写
Vue.component("nav-bar",{
props:['navShow',"elecText","mainText","isIos"],
// props这个里边的值是用来使用他的父组件给他传参数的.什么类型都可以传,
// 但是对象和数组传过来,都是指向父组件的，所以如果你改变了这个组件内的的值,也会影响到父组件,这种事最好不要发生!!
// 在主组件调用时使用这种 nav-show="something" 首先要注意这个格式,
// 二就是相当于给这个组件弄了个属性,引用时相当于给属性赋值
data:function(){
return {
// couter:"正在加载资源..."
// 必须加个return一个对象的方式定义data,主要是保证状态不受影响
}
},
template:'<div class="navBar" :class="{blank:isIos}">'+
'<div v-show="navShow" @click="backHasClick" class="navBarLeft">'+
'<span class="fa fa-angle-left"></span>'+
'</div>'+
'<div class="navBarCenter">{{matchN(mainText)}}</div>'+
'<div class="elecV">{{elecText}}</div>'+
'</div>',
// 这个组件内容了,要保证有一个主容器包裹,写法就是简单的语法了
methods:{
backHasClick:function(){
this.$emit("backclick");
// 自定义事件backclick;当触发这个函数的时候,就触发这个事件.在父组件监听这个事件就ok
}
},
computed:{
matchN:function(val){
return val.replace(/\\n/,' \n ');
}
},
mounted:function() {
// 每个组件都有自己的生命周期..so.还有beforCreated created等等,如果忘了直接百度vue的生命周期
}
})主组件调用他
<div id="app">
<nav-bar :is-ios="isiOS" :main-text="mainText" :elec-text="elecText" :nav-show="navBarShows" @backclick="backEventHandle"></nav-bar>
</div>
<!--
说明：:is-ios="isiOS" 动态传参，
-->彻底的子组件写法
var App=new Vue({
el:"#app",
data:{
msg:"hello world",
types:"text",
active:false
},
components:{
"my-componemt":{
// 这一部分可以单拿出来写
template:"<div>{{child}}</div>",
data:{
return {
child:"文字"
}
}
}
}
}）从这一点上就不难看出组件可以套组件套很多层。
从开发角度看，就是常用的那些就都注册成全局组件，不常用只属于某个组件就注册成子组件