王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
<!--
子组件向父组件传值
-->
<html>
<title>todolist</title>
<body>
<div id="app">
<input type="text" v-model="inputVal">
<button v-on:click="onClick">提交</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- v-bind 可省略 -->
<todo-list v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handItemDel">
</todo-list>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var TodoList={
props:[
'content','index'
],
template:"<li @click='delClick'> {{content}} </li>",
methods:{
//子组件向父组件传值
delClick:function(){
this.$emit("delete",this.index)
}
}
}
var app = new Vue({
el:'#app',
components:{
TodoList:TodoList
},
data:{
list:[],
inputVal:''
},
methods:{
onClick:function(){
this.list.push(this.inputVal);
this.inputVal='';
},
handItemDel:function(index){
this.list.splice(index,1)
}
}
})
</script>
</html>
