父子组件之间的传值总结

父组件给子组件传值: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:方法名=“函数方法”
父组件在函数方法中进行数据操作

原文链接：https://blog.csdn.net/weixin_39893889/article/details/103013865

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。