<h5>6.组件创建</h5>
<div class="component">
	<ul>
		<custom v-for="item in lists" v-bind:todo="item"  v-bind:key="item.id"></custom>
	</ul>
</div>
<pre>注意：1.组件的创建方式；2.props:['todo'], 设置参数注意格式；3.v-bind:todo="item"，数据传递至组件参数内</pre>
<script type="text/javascript">
	//创建组件
	const cpt = {
		data(){
return{
	lists:[
	{id:0,title:"组件第1条数据"},
	{id:1,title:"组件第2条数据"},
	{id:2,title:"组件第3条数据"}
	]
}
		}
	}
	const Cpt = Vue.createApp(cpt); //创建数据实例
	//添加数据实例对应的组件
	Cpt.component('custom',{  
		props:['todo'], //设置参数注意格式
		template:`<li>{{todo.title}}</li>`
	})
    const apps = Cpt.mount('.component');//组件实例挂载到元素上,并创建应用实例
    console.log(apps.lists);
</script>

交互效果见：https://course.51qux.com/vue3-0-1