目录结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
</head>
<body>
<div class="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import TodoList from './TodoList' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '.app', router, components: { TodoList }, template: '<TodoList/>' })
TodoList.vue文件
<template>
<div>
<input type="text" v-model="inputValue">
<button v-on:click="handleSubmit">提交</button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete">
</todo-item>
</ul>
</div>
</template>
<script>
//导入componets下的组件todoItem.vue
import todoItem from './components/todoItem'
//局部组件的注册和声明,之后在本页面使用局部组件todo-item
export default {
components:{
'todo-item':todoItem,
},
data(){
return {
inputValue:'',
list:[]
}
},
methods:{
handleSubmit(){
this.list.push(this.inputValue)
this.inputValue=''
},
//点击ul下的li,删除对应的项,通过index标识
handleDelete(index){
this.list.splice(index,1)
}
}
}
</script>
<style>
</style>
todoItem.vue文件
<template>
<li v-on:click="handleDelte">{{content}}</li>
</template>
<script>
export default {
// 父子组件传值如此通信
// 子组件通过props接收父组件传来的值
props:['content','index'],
methods:{
handleDelte(){
console.log(this.index)
// 子组件触发了事件出去,父组件那边需要监听并处理
this.$emit('delete',this.index)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>