先上代码:
<body>
<div id="app">
<parent></parent>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var child={
template:'<h1>child</h1>'
}
Vue.component('parent',{
template:'<div><h1>parent</h1><child-component></child-component><div>',
components:{
'child-component':child
}
})
new Vue({
el:'#app'
})
</script>
</body>
注意:文中标红的地方是创建父组件时的html代码,外层必须包一层div,否则会报错。