Vue组件通信-子传父

小鱼儿 2022-10-29 07:34 179阅读 0赞

组件通信之子传父：  
当子组件发生了某事件，子组件发射该事件  
父组件监听该事件并作出反应  
`核心代码如下：`

<body>
    
    <div id="app">
        <cpn @item-click="cpnClick"></cpn>
    </div>
    
    
    <template id="cpn">
        <div>
            <button v-for="item in categories"
                    @click="btnClick(item)">
                { { item.name}}
            </button>
        </div>
    </template>
    
    <script src="../Vue_js/vue.js"></script>
    <script>
        //1、子组件
        const cpn = { 
            template: '#cpn',
            data() { 
                return { 
                    categories: [
                        { id: 'aaa', name: '热门推荐'},
                        { id: 'bbb', name: '手机数码'},
                        { id: 'ccc', name: '家用家电'},
                        { id: 'ddd', name: '电脑办公'},
                    ]
                }
            },
            methods: { 
                btnClick(item) { 
                    //发射事件
                    this.$emit('item-click', item)
                }
            }
        }
        //2、父组件
        const app = new Vue ({ 
            el: '#app',
            data: { 
                message: 'vue模板',
            },
            components: { 
                cpn
            },
            methods: { 
                cpnClick(item) { 
                    console.log('cpnClick', item);
                }
            },
        })
    </script>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）

在语法中，你不需要显式地导出任何东西，因为所有顶层变量、函数和组件都会自动暴露给模板和其他组件。

落日映苍穹つ/ 2024年04月22日 22:30/ 0 赞/ 93 阅读

相关 Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值

一、概述以脚手架搭建的`Vue`项目为笔记背景。如果将所有的代码逻辑全部放到一个组件中，代码是非常的臃肿和难以维护的。并且在真实开发中，可能会有更多的内容和代码

谁践踏了优雅/ 2024年04月02日 03:17/ 0 赞/ 77 阅读

相关 Vue组件之间的通信-父传子-子传父

文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式

小咪咪/ 2023年09月28日 15:46/ 0 赞/ 14 阅读

相关详解React组件通信（父传子、子传父、兄弟组件传值）

1、父组件传值子组件 React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图： ![480452-20200304193735358-925055

我就是我/ 2023年07月11日 11:03/ 0 赞/ 290 阅读

相关 Vue组件之间传值,父传子,子传父,兄弟之间传递

父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收在props中使用驼峰形式，模板中需要使用短横线的形

╰半夏微凉°/ 2023年02月17日 02:58/ 0 赞/ 34 阅读

相关 vue 组件子向父传值

<body> <div id="app"> <div :style='{ fontSize: fontSize + "px"}'>{

缺乏、安全感/ 2023年01月08日 04:23/ 0 赞/ 172 阅读

相关 vue 组件父向子传值

<body> <div id="app"> <div>{ {pmsg}}</div> <menu-item t

超、凢脫俗/ 2023年01月08日 04:23/ 0 赞/ 176 阅读

相关 vue子传父、父传子

子传父　　vue子传父使用$emit传值　　子组件： <table> <tbody> <tr> <td> <p>1</p> <p>2</p> <p>

小咪咪/ 2022年10月30日 05:23/ 0 赞/ 203 阅读

相关 Vue组件通信-子传父

组件通信之子传父：当子组件发生了某事件，子组件发射该事件父组件监听该事件并作出反应 `核心代码如下：` <body>

小鱼儿/ 2022年10月29日 07:34/ 0 赞/ 180 阅读

相关 vue组件之间互相传值：父传子，子传父(父子传值)

[https://www.cnblogs.com/xiongzuyan/p/7485700.html][https_www.cnblogs.com_xiongzuyan_p_7

旧城等待，/ 2021年11月06日 00:06/ 0 赞/ 519 阅读