<div?id="root">
????<!--模板-->
????<input?v-model="inputValue"?type="text"?autofocus=true?/>
????<button?@click="handleSubmit">提交</button>
????<ul>
????????<!--子組件-->
???????<todo-item?v-for="(item,index)?of?list"
??????????????????:key="index"
??????????????????:content="item"
??????????????????:index="index"
??????????????????@delete="handleDelete"
???????????????>
???????</todo-item>
????</ul>
</div>
<script>
//????每一個組件都是一個實例
//????Vue.component注冊或獲取全局組件
????Vue.component('todo-item',{
//????????props?可以是數組或對象，用于接收來自父組件的數據
????????props:['content','index'],
????????template:'<li?@click="handleClick">{{content}}{{index}}</li>',
????????methods:{
????????????handleClick:function(){
//????????????????$emit觸發當前實例上的事件。附加參數都會傳給監聽器回調。
????????????????this.$emit('delete',this.index)
????????????}
????????}
????})
//????var?TodoItem={
//????????template:'<li>item</li>'
//????}
//實例
????new?Vue({
//????????掛載點
????????el:"#root",
????????data:{
????????????inputValue:"",
????????????list:[]
????????},
????????methods:{
????????????handleSubmit:function(){
????????????????this.list.push(this.inputValue)
????????????????this.inputValue=""
????????????},
????????????handleDelete:function(index){
????????????????this.list.splice(index,1)
????????????}
????????}
????})
</script>