<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> todolist删除</title>
<link rel="stylesheet" href="test1.css">
<script type="text/javascript" src="vue.js"></script> </head>
<body>
<div id="rooter">
<input type="text" v-model="valueput"/>
<button @click="handler">提交</button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index"
@delete="handleDelete"></todo-item>
</ul>
</div>
<script>
var todoitem={
props:["content","index"], //将值从父组件来接听
template:'<li @click="had">{{content}}</li>',
methods:{
had:function () {
this.$emit("delete",this.index); //可以将值传给父组件
}
}
};
new Vue({
el:'#rooter',
data:{
valueput:"",
list:[],
content:''
},
components:{
'todo-item':todoitem
},
methods:{
handler:function(){
this.list.push(this.valueput);
this.valueput=""; },
handleDelete:function(index){
this.list.splice(index,1);
}
} });
console.log(1);
</script>
</body>
</html>
父组件向子组件传递参数，通过属性的方式和props
子组件向父组件传递参数，通过发布的方式：this.$emit("",...............)