VUE入门之父子组件间相互传值实现todolists

父组件向子组件传值使用props
子组件向父组件传值使用emit

父组件todolists.vue

<template>
    <div id="root">
       <div>
       <input v-model="inputValue"/>
       <button @click="handSubmit">提交</button>  
       </div> 
     <item
     v-for="(item,index) of list"
     :key="index"
     :content="item"
     :index="index"
     @delete="handleDelete">
     </item>
    </div>
</template>
<script>
import item from "./item.vue"
export default {
    name:"root",
    components: {
       item
     },
    
    data() {
        return{
          inputValue:"hi",
          list:[]
        }   
    },
    methods: {
        handSubmit() {
            this.list.push(this.inputValue);
            this.inputValue = '';
        },
        handleDelete(index) {
            this.list.splice(index,1);
        }
    }
}
</script>
<style scoped>

</style>

子组件item.vue

<template>
    <div id="root">      
       <ul>
           <li @click="handleClick">
               {{content}}
           </li>
       </ul>
    </div>
</template>
<script>
export default {
    name:"item",
    props:['content','index'],  
    data() {
        return{
        }   
    },
    methods:{
        handleClick(){
            this.$emit("delete",this.index)
        }
    }
}
</script>
<style scoped>

</style>

更多前端资料获取
请微信关注公众号：前端从入门到SP