<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?可以是數(shù)組或?qū)ο?，用于接收來自父組件的數(shù)據(jù)
????????props:['content','index'],
????????template:'<li?@click="handleClick">{{content}}{{index}}</li>',
????????methods:{
????????????handleClick:function(){
//????????????????$emit觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。
????????????????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>