例:全局組件
<body>
<div id="app">
<my-comonpent></my-compinent>
</div>
<template id="myTemplate">
<div>
<h3>123</h3>
</div>
</template>
<script src="js/vue2.5.js"></script>
<script>
//將模板對象註冊到組件中
vue.component("my-component",
{template:"#myTemplate"});
var vm=new vue({
el: "#app"
});
</script>
</body>
局部組件
<body>
<div id="app">
<my-comonpent></my-compinent>
</div>
<template id="myTemplate">
<div>
<h3>123</h3>
</div>
</template>
<script src="js/vue2.5.js"></script>
<script>
var vm=new vue({
el: "#app"，
component:{
"my-component":{
{template:"#myTemplate"}
}
}
});
</script>
</body>
子組件中，data不再是一個對象，而是一個function，且這個function必須返回一個對象
例
<body>
<div id="app">
<my-comonpent></my-compinent>
</div>
<template id="myTemplate">
<div>
<p>{{msg}}</p>
</div>
</template>
<script src="js/vue2.5.js"></script>
<script>
vue.component("my-component",
{
template:"#myTemplate";
data:function(){
return{
msg:"1234"
}
}
});
var vm=new vue({
el: "#app"
});
</script>
</body>