父子组件之间的传值总结

父子组件之间的传值总结

父组件给子组件传值:v-bind:属性名=属性值

//父组件
<template>
    <div class="todolist">
        <ul>
            <TodoItem 
                v-bind:contentItem="item"
                v-bind:key="index"
                v-for="(item,index) in list" 
            ></TodoItem>
        </ul>
    </div>
</template>

<script>
import TodoItem from "./todoItem"
    export default {
        name: 'TodoList',
        data () {
            return {
                 list:[]
            }
        },
        components: {
            TodoItem
        }
    }
</script>

<style scoped>
.todolist ul{
    list-style: none;
}
</style>


//子组件
<template>
    <li>{{contentItem}}</li>
</template>
<script>
export default {
    name:"TodoItem",
    props:['contentItem',"key"],
}
</script>
<style scoped>
</style>

子组件改变父组件的数据:this.$emit(函数名称，参数)

//父组件
<template>
    <div class="todolist">
        <ul>
            <TodoItem 
                v-bind:contentItem="item"
                v-bind:key="index"
                v-for="(item,index) in list" 
                v-on:delete="HandleItemdelete"
            ></TodoItem>
        </ul>
    </div>
</template>

<script>
import TodoItem from "./todoItem"
    export default {
        name: 'TodoList',
        data () {
            return {
                 list:[]
            }
        },
        methods: {
            HandleItemdelete:function(index){
               alert(index)
            }
        },
        components: {
            TodoItem
        }
    }
</script>

<style scoped>
.todolist ul{
    list-style: none;
}
</style>


//子组件
<template>
    <li v-on:click="ItemClick">{{contentItem}}</li>
</template>
<script>
export default {
    name:"TodoItem",
    props:['contentItem',"key"],
    methods: {
        ItemClick:function(){
            this.$emit("delete",this.key);
        }
    },
}
</script>
<style scoped>
</style>

总结

父子间向子组件传值

父组件向子组件传值可以通过v-bind指令进行传值，语法格式为v-bind:属性名=属性值
子组件获取父组件传过来的值：可以通过props属性进行获取，并通过{{}}的形式进行渲染

子组件向父组件传值

子组件可以通过this.$emit(“方法名”,参数)方法向外触发事件
父组件监听子组件向外触发的事件v-on:方法名=“函数方法”
父组件在函数方法中进行数据操作