22vue学习_子组件通过自定义事件传递数据给父组件

最新推荐文章于 2022-10-19 00:08:05 发布

chencaw

最新推荐文章于 2022-10-19 00:08:05 发布

阅读量195

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113729208

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1子组件通过自定义事件传递数据给父组件

（1）子组件通过$emit发射自定义事件XXX

（2）父组件响应该自定义事件v-on:XXX或者@XXX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <!-- 注意，这里父组件监听子组件的消息 -->
        <cpn @itemclick="cpnclick"></cpn>
    </div>
    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
            <button v-for="item in categories" 
                @click = "btnclick(item)">
                {{item.name}}
            </button>
        </div>            
    </template>

    <script src="../js/vue.js"></script>
    <script>
        //1.子组件
        const cpn ={
            template: '#cpn1',
            data() {
                return{
                    categories:[
                        {id: '101', name: '热门推荐'},
                        {id: '102', name: '手机数码'},
                        {id: '103', name: '家用家电'},
                        {id: '104', name: '电脑办公'},
                    ]
                }
            },
            methods:{
                btnclick(item){
                    // console.log(item)
                    //注意：发送事件给父组件
                    // this.$emit('itemclick')
                    this.$emit('itemclick',item)
                }
            }      
        };
        //2父组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
            },
            components:{
                cpn
            },
            methods:{
                cpnclick(item){
                    console.log('cpnclick',item);
                }
            }     
        })
    </script>
</body>

chencaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
22vue学习_子组件通过自定义事件传递数据给父组件

1子组件通过自定义事件传递数据给父组件（1）子组件通过$emit发射自定义事件XXX（2）父组件响应该自定义事件v-on:XXX或者@XXX<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <!-- 父
复制链接

扫一扫