子组件向父组件传数据使用自定义事件

最新推荐文章于 2024-01-28 21:17:33 发布

zoepriselife316

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量550

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zoepriselife316/article/details/110866068

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

直接上代码：
props用于父组件向子组件传参，子组件传递数据或事件通过自定义事件来完成。
（v-on不仅用于监听DOM事件，也可以用于组件间的自定义事件。）
自定义事件流程：
在子组件中，this.$emit(事件名称，参数)触发时间，
在父组件中，使用v-on监听子组件的事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件向父组件传数据-自定义事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 父组件模板 -->
    <div id="app">
        <!-- 在父组件中使用v-on:itemclick方式绑定监听子组件的itemclick事件-->
        <cpn :cmsg="msg" @itemclick="cpnClick"></cpn>
    </div>

    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <span>{{cmsg}}</span>
            <br>
            <button v-for="item in categaries" :key="item.id" @click="btnClick(item)">
                {{item.name}}
            </button>
        </div>
    </template>

    <script>
        // 子组件
        const cpn = {
            template: '#cpn',
            props: {
                cmsg: {
                    type: String,
                    default: '哈哈哈'
                }
            },
            data(){
                return {
                    categaries:[
                        {id:'aaa',name:'小家电'},
                        {id:'bbb',name:'生鲜'},
                        {id:'ccc',name:'蔬菜'},
                        {id:'ddd',name:'水果'}
                    ]
                }
            },
            methods:{
                btnClick(item){
                    // 自定义事件
                    // 子组件向父组件发射事件，this.$emit（自定义事件名，传参）
                    this.$emit('itemclick',item)
                }
            }
        }
        // 父组件
        const app = new Vue({
            el: '#app',
            data: {
                msg: '我是商场'
            },
            components: {
                cpn
            },
            methods:{
                // 父组件接收子组件事件发送的值，进行相关操作
                cpnClick(item){
                    console.log('cpnClick',item)
                }
            }
        })

        /*
            props用于父组件向子组件传参，子组件传递数据或事件通过自定义事件来完成。
            （v-on不仅用于监听DOM事件，也可以用于组件间的自定义事件。）
            自定义事件流程：
            在子组件中，this.$emit(事件名称，参数)触发时间，
            在父组件中，使用v-on监听子组件的事件
        */ 
    </script>
</body>

</html>

zoepriselife316

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
子组件向父组件传数据使用自定义事件

直接上代码：props用于父组件向子组件传参，子组件传递数据或事件通过自定义事件来完成。（v-on不仅用于监听DOM事件，也可以用于组件间的自定义事件。）自定义事件流程：在子组件中，this.$emit(事件名称，参数)触发时间，在父组件中，使用v-on监听子组件的事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view
复制链接

扫一扫