技術標籤：vuehtmlpythonjavascriptjs

<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