Vue中组件的定义和注册

//1.通过Vue.extend定义组件

var Header=Vue.extend({
template:‘<h1>这是一个头部组件</h1>’
})

//2.注册组件

Vue.component(‘v-header’,Header); //组件名不能和html标签名一样

//3.使用组件

<v-header></v-header>

//1.直接定义组件

var Header={

template:‘

这是一个头部组件

’

}​

//2.注册组件

var vm=new Vue({
el:‘#box’,
data:{
name:‘zhangsan’
},
components:{
‘v-header’:Header   //在vue内部注册组件
}
});​

组件可以自己定义方法和数据（数据必须通过方法返回）

var Header={
template:'<h1 @click="change()">{{name}}</h1>',
data:function(){   /*组件里面定义数据的方式*/
return {
name:'头部组件',
}
},
methods:{
change(){
this.name='头部组件变';
alert('this is a  Header component  run');
}
}​
};

组件的模板，一般使用第二种

1、通过script创建

<script type="x-template" id="header">
<div class="header">
<p>{{msg}}</p>
<button @click="run()">这是一个按钮</button>
</div>
</script>

2、或者通过template标签创建

<template id=" header ">
<div class="h
a2a4
eader">
<p>{{msg}}</p>
<button @click="run()">这是一个按钮</button>
</div>
</template>

3、使用

var Header={template:’#header‘}​