Vue组件子传父

最新推荐文章于 2023-04-19 15:51:34 发布

Kikyo--

最新推荐文章于 2023-04-19 15:51:34 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/weixin_55803498/article/details/116240055

版权

在Vue中将子组件的参数传给父组件

<body>
    <div id="app">
        <cpn @item-click="cpnClick"></cpn>
        //item-click为发射事件，cpnClick为接收事件（在省略参数item的情况下系统会默认参数为item）
    </div>
</body>
<template id="cpn">
    <div>
        <button v-for="item in catalog" @click="btnClick(item)">{{item.name}}</button>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //子组件
    const cpn = {
            template: "#cpn",
            data() {
                return {
                    catalog: [{
                        id: "a",
                        name: "热门推荐"
                    }, {
                        id: "b",
                        name: "手机数码"
                    }, {
                        id: "c",
                        name: "家用电器"
                    }]
                }
            },
            methods: {
                btnClick(item) {
                    //发射事件:自定义事件('事件名'，参数)
                    this.$emit('item-click', item)
                }
            },
        }
        //父组件
    const app = new Vue({
        el: "#app",
        components: {
            cpn
        },
        methods: {
            cpnClick(item) {
            //接收事件，打印'cpnClick'和item
                console.log('cpnClick', item);
            }
        }
    })
</script>

</html>

在这里插入图片描述

子传父的过程大致为在子组件中自定义一个发射事件将子组件data中的数据作为参数，在父组件中定义一个接收事件同时接收参数从而完成子组件向父组件传递数据的过程。

Kikyo--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件子传父

在Vue中将子组件的参数传给父组件<body> <div id="app"> <cpn @item-click="cpnClick"></cpn> //item-click为发射事件，cpnClick为接收事件（在省略参数item的情况下系统会默认参数为item） </div></body><template id="cpn"> <div>
复制链接

扫一扫