vue 组件之间传值 父传子 子传父 todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#app {
width: 800px;
margin: 0 auto;
}
</style>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="newItem">
<button @click="addWork">添加待办</button>
<ul>
<!-- <li :content='item' :index v-for="(item,index) in arr">{{item}}</li> -->
<todo-item :content='item' :index="index" @delete='handleItemDelete(index)' v-for='(item,index) in arr'></todo-item>
</ul>
</div>
</body>
<script>
var TodoItem = {
props: ['content', 'index'],
template: "<li @click='handleItemClick(index)'>{{content}}</li>",
methods: {
handleItemClick: function() {
this.$emit('delete', this.index)
}
}
};
var vm = new Vue({
el: "#app",
data: {
newItem: '',
arr: []
},
components: {
TodoItem: TodoItem
},
methods: {
addWork: function() {
this.arr.push(this.newItem);
this.newItem = ''
},
handleItemDelete: function(index) {
console.log(index)
this.arr.splice(index, 1);
}
}
});
</script>
</html>
