首先简单回顾一下定义组件用到的参数。
components:定义一个新的组件
template:书写组件中的html内容，用一对``括起来
首先一开始，先写一下子组件的内容，因为要多次调用所以赋给了变量child：
var child = {
template:`
<ul>
<p>这是子组件内容</p>
<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
</ul>
` //定义子组件内容
}
接下来，写一下父组件的内容，同时在父组件中使用到了子组件，所以加入了components的设置：
var parent = {
template:`
<div>
<h2>这是父组件内容</h2>
<page></page>
</div>
`, //定义父组件内容
components:{
'page':child //将子组件内容赋给page自定义标签
}
}
最后就是Vue实例化，同时加入components的设置，加入父组件：
var app = new Vue({
el:'#app',
components:{
'rabbit':parent
} //将父组件内容赋给rabbit自定义标签
})
完整代码：
<div id = 'app' v-cloak>
<rabbit></rabbit>
</div>
<script>
var child = {
template:`
<ul>
<p>这是子组件内容</p>
<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
</ul>
` //定义子组件内容
}
var parent = {
template:`
<div>
<h2>这是父组件内容</h2>
<page></page>
</div>
`, //定义父组件内容
components:{
'page':child //将子组件内容赋给page自定义标签
}
}
var app = new Vue({
el:'#app',
components:{
'rabbit':parent
} //将父组件内容赋给rabbit自定义标签
})
代码量非常少，但是这段代码很好的描述了书写一对父子组件的过程，父子组件内容复杂起来，就可以产生很大的效用。
资源均来自第三方，谨慎下载，前往第三方网站下载
