Vue——如何在父组件中使用子组件

首先简单回顾一下定义组件用到的参数。
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自定义标签
		})

代码量非常少，但是这段代码很好的描述了书写一对父子组件的过程，父子组件内容复杂起来，就可以产生很大的效用。