vue最大的不同是，其他（eg:javascript）是操作dom对象，vue是操作数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todolist子组件通知父组件删除子组件</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id = "text">
<div>
<input v-model = "inputMsg"></input>
<button @click = "submitButton">提交</button>
<div >
<ul>
<item v-for = '(ite,index) of list '
:key = 'index'
:param = 'ite'
:xiabiao = 'index'
@delet = 'deleteTest'
></item>
<!--@此处得@表示v-on,delet是可以自定义的，此处的@delet是父组件的，因为要删除的是<li>子组件
点击<li>子组件的时候，通过clickTest方法通知父组件要删除的下标，父组件收到delet这个参数的时候
触发deleteTest，删除该数据项
-->
</ul>
</div>
</div>
</div>
<script>
Vue.component('item',{//定义组件
props: ['param','xiabiao'],
template: "<li @click = 'clickTest'>{{param}}{{xiabiao}}</li>",//定义摸板
methods: {
clickTest:function(){
// alert('你点击的数据项是'+this.param)
this.$emit('delet',this.xiabiao)
}
}
})
new Vue({
el: "#text",
data: {
inputMsg:'',
list: []
},
methods: {
submitButton: function(){
this.list.push(this.inputMsg)
this.inputMsg = ''
},
deleteTest:function(xiaobiao){
this.list.splice(xiaobiao,1)
}
}
})
</script>
</body>
</html>
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
