例:全局组件
<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>