Vue前端开发-访问子组件对象中数据

父组件除了绑定子组件的自定义事件获取传入的参数外，还可以直接访问通过ref属性命名后的子组件，并获取到子组件中的数据，下面通过一个实例来演示它实现的过程。

实例7-3 父组件访问子组件对象中数据

1. 功能描述

在实例7-1的基础之上，向父组件添加一个“取值”按钮，当点击该按钮时，直接访问子组件对象中的“name”属性值，并将它赋值给父组件的变量，同时显示在视图中。

2. 实现代码

在项目的components 文件夹中，添加一个名为“Parent”的.vue文件，该文件的保存路径是“components/ch7/part3/”，在文件中加入如清单7-5所示代码。

代码清单7-5 Parent.vue代码

<template>
    <div class="iframe">
        <div class="i-left">
            <span>父组件：</span>
            <span>{{ name }}</span>
        </div>
        <div class="i-right">
            <button @click="onGetName">取值</button>
        </div>
    </div>
    <!-- 在父组件中调用子组件 -->
    <Child ref="retNameChild" />
</template>
<script>
import Child from "./Child.vue"
export default {
    data() {
        return {
            name: ""
        }
    },
    components: {
        Child
    },
    methods: {
        onGetName() {
            this.name = this.$refs.retNameChild.name;
        }
    }
}
</script>
<style>
.iframe {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 8px;
    border: solid 1px #ccc;
}

.i-left {
    display: flex;
    align-items: center;
}

.iframe:last-child {
    border-top: none;
    background-color: #eee;
}
</style>

在父组件中，导入并注册了一个名称为Child的子组件，它的功能是向父组件提供数据源，为父组件提供一个名称为“name”的可访问变量，它的代码如清单7-6所示。

代码清单7-6 Child.vue代码

<template>
    <div class="iframe">
        <div class="i-left">
            <span>子组件：</span>
            <span>{{ name }}</span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name: "陶国荣"
        }
    }
}
</script>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图7-4所示。

4. 源码分析

在父组件Parent源码中，为了能直接访问到子组件，则向子组件添加了一个名称为“ref”的属性，并设置该属性值为“retNameChild”，完成该项设置后，父组件则可以通过该属性值直接访问到子组件，并获取到它定义的数据。

在子组件Child源码中，为了给父组件提供数据源，定义了一个名称为“name”的变量，并赋值为“陶国荣”，则父组件可以通过this.$refs.retNameChild.name代码，获取到子类组件定义的“name”变量值，并将该值显示在视图元素中。

需要说明的是：$refs对象必须在组件渲染完成后才能被获取，并且它不支持响应式，因此，应当避免在计算属性中使用$refs对象，它只是一个用于操作子组件的方案。

原文地址：https://blog.csdn.net/chuanshixx/article/details/143967552

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！