Vue子组件向父组件传递数据，Vue自定义事件

最新推荐文章于 2023-02-25 14:30:44 发布

半个程序员一个哲学家

最新推荐文章于 2023-02-25 14:30:44 发布

阅读量145

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41266196/article/details/121090228

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue 子组件向父组件传递数据

定义子组件模板和子组件
定义父组件模板和父组件
在父组件中绑定子组件
在子组件的data中设置categories键值对数组，在子组件模板中显示v-for，最后在父组件模板使用
在子组件methods中自定义btnClick方法，传入item，使用$emit自定义事件传递给父组件，自定义itemclick作为btnClick(item)传递出事件的标识
定义点击事件@click="btnClick(item)，在点击按钮时，调用子组件methods的btnClick(item)方法中的 this.$emit('itemclick')传递给正在监听（下一步定义）的父组件
父组件模板使用组件时设置监听@itemclick="cpnclike"``itemclick是子组件$emit发射的标识；cpnclike是父组件methods中的方法，用来执行子组件的点击事件
定义cpnclike方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<!-- 2. 父组件模板 -->
<div id="app">
    <!--    4. 父组件模板使用-->
    <!--    7.父组件模板使用组件时设置监听- @itemclick=""cpnclike -->
        <cpn @itemclick="cpnclike"></cpn>
    </div>
    <!-- 1. 子组件模板 -->
<template id="cpn">
    <div>
<!--        4. 在子组件模板中显示v-for-->
        <button v-for="item in categories"
                @click="btnClick(item)">
            {{item.name}}
        </button>
    </div>
</template>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    //1. 子组件
    const cpn={
        template: '#cpn',
        // 4. 在子组件的data中设置categories键值对数组
        data(){
            return{
                categories:[
                    {id: '1',name: '热门推荐'},
                    {id: '2',name: '手机数码'},
                    {id: '3',name: '电脑办公'}
                ]
            }
        },
    // 5. 在子组件methods中自定义btnClick方法，传入item，
    // 5.使用$emit自定义事件传递给父组件，
        methods:{
            btnClick(item){
                // 自定义itemclick作为btnClick(item)传递出事件的标识
                this.$emit('itemclick',item)
            }
        }
    }

    //2. 父组件
    const app = new Vue({
        el:'#app',
        data: {
            message:'hello'
        },
        //3. 在父组件中绑定子组件
        components:{
            cpn
        },
        methods: {
            //8. 定义cpnclike方法
            cpnclike(item){
                console.log('cpnclike',item);
            }
        }
    })
</script>

</body>
</html>