父子组件通信

最新推荐文章于 2024-06-22 02:20:01 发布

学习笔记666

最新推荐文章于 2024-06-22 02:20:01 发布

阅读量1.3k

点赞数 1

分类专栏： Vue2学习笔记

本文链接：https://blog.csdn.net/github_26672553/article/details/54694132

版权

Vue2学习笔记专栏收录该内容

23 篇文章 3 订阅

订阅专栏

前面我们已经学习了子组件通过设置props接收父组件传递过来的data：http://blog.csdn.net/github_26672553/article/details/54693812

这里，我们要来学习一下，父组件如何获取子组件的data。

1.我们在父组件aaa中定义一个方法

                        get(msg){
                            //alert(msg);
                            this.msg = msg;
                        }

此方法接收一个参数，然后修改data中的数据。

2.子组件bbb里也定义一个方法

                                send(){
                                    this.$emit('child-msg', this.c);
                                }

send()方法中，使用了this.$emit(“事件名”,参数)来触发父组件的事件。

3.在使用子组件的时候需要绑定

<!-- 在aaa组件里使用组件bbb -->
            <bbb @child-msg="get"></bbb>

@child-msg="get"把父组件的get()方法绑定到了子组件上，子组件里就可以通过this.$emit('child-msg') 来触发

4.子组件bbb模板代码

    <template id="bbb">
        <div>
            <span>我的bbb,{{c}}</span>
            <input type="button" value="发送" @click="send">
        </div>
    </template>

点击按钮“发送”，调用send方法，然后send方法会触发父组件的get方法，最终实现把子组件的数据传递给了父组件。
这里写图片描述

可以看到，父组件要获取子组件的数据，其实就是子组件把自己的数据，发送给父级。
通过vm.$emit('事件名',参数) ，事件名是自己定义的。

5.完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> 
    <div id="box">
        <!-- 使用组件aaa -->
        <aaa></aaa>
    </div>

    <!-- 我们把组件模板抽离出来 -->
    <template id="aaa">
        <div>
            <span>我是父级 {{msg}}</span>
            <hr>
            <!-- 在aaa组件里使用组件bbb -->
            <bbb @child-msg="get"></bbb>
        </div>
    </template>
    <template id="bbb">
        <div>
            <span>我的bbb,{{c}}</span>
            <input type="button" value="发送" @click="send">
        </div>
    </template>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {msg:'我是aaa组件的数据'}
                    },
                    methods:{
                        get(msg){
                            //alert(msg);
                            this.msg = msg;
                        }
                    },
                    template: '#aaa',
                    components:{
                        'bbb':{
                            data(){
                                return {c:'我是子组件的数据'}
                            },
                            template:'#bbb',
                            methods:{
                                send(){
                                    this.$emit('child-msg', this.c);
                                }
                            }
                        },
                    }
                },
            }
        });
    </script>
</body>
</html>

学习笔记666

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
父子组件通信

前面我们已经学习了子组件通过设置props接收父组件传递过来的data：http://blog.csdn.net/github_26672553/article/details/54693812这里，我们要来学习一下，父组件如何获取子组件的data。1.我们在父组件aaa中定义一个方法 get(msg){
复制链接

扫一扫

专栏目录