WEB前端：vuejs全家桶（25）：组件-父组件访问子组件的数据

最新推荐文章于 2022-09-02 01:30:47 发布

hahahafree

最新推荐文章于 2022-09-02 01:30:47 发布

阅读量126

点赞数

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

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102974560

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

2.2 父组件访问子组件的数据

a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义
b)父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据
总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        <my-hello></my-hello>
    </div>

    <template id="hello">
        <div>
            <h3>我是hello组件</h3>
            <h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>

            <h3>访问子组件的数据：{{sex}},{{height}}</h3>
            <!-- //子传数字给父第7步： 显示子传过来的数据-->
            <hr>
            <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>

            <!-- //子传数字给父第4步： @e-world和第2步名称一致 -->


        </div>
    </template>

    <template id="world">
        <div>
            <h3>我是world组件</h3>
            <h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
            <h4>访问自己的数据：{{sex}},{{height}}</h4>
            <button @click="send">将子组件的数据向上传递给父组件</button>
            <!-- //子传数字给父第3步：触发按钮 -->

        </div>
    </template>
</body>
<script>
    var vm = new Vue({ //根组件
        el: '.itany',
        components: {
            'my-hello': { //父组件
                methods: {
                    getData(sex, height) { //子传数字给父第5步：接收子传过来的数据
                        this.sex = sex;
                        this.height = height;
                    }
                },
                data() {
                    return {
                        msg: 'WEB',
                        name: 'tom',
                        age: 23,
                        user: {
                            id: 9527,
                            username: '唐伯虎',

                        },
                        sex: '', //子传数字给父第6步：父中需要定义数据
                        height: ''

                    }
                },
                template: '#hello',
                components: {
                    'my-world': { //子组件
                        data() {
                            return { //子传数字给父第1步：定义要传的数据
                                sex: 'male',
                                height: 180.5
                            }
                        },
                        template: '#world',
                        // props: ['message', 'name', 'age', 'user']//简单的字符串数组
                        props: { //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
                            message: String,
                            name: {
                                type: String,
                                required: true
                            },
                            age: {
                                type: Number,
                                default: 18,
                                validator: function(value) {
                                    return value >= 0;
                                }
                            },
                            user: {
                                type: Object,
                                default: function() { //对象或数组的默认值必须使用函数的形式来返回
                                    return {
                                        id: 3306,
                                        username: '秋香'
                                    };
                                }
                            }
                        },
                        methods: { //子传数字给父第2步：定义触发的方法名称和发送的数据
                            send() {
                                // console.log(this);  //此处的this表示当前子组件实例
                                this.$emit('e-world', this.sex, this.height); //使用$emit()触发一个事件，发送数据
                            }
                        }
                    }
                }
            }
        }


    });
</script>

</html>

在这里插入图片描述