vue.js之父子组件通信之方式二（ref和$ref）

最新推荐文章于 2024-09-26 07:51:19 发布

我在人间贩卖青春

最新推荐文章于 2024-09-26 07:51:19 发布

阅读量2.5k

点赞数 5

分类专栏： vue.js 文章标签：前端 vue.js 父子组件通信

本文链接：https://blog.csdn.net/weixin_44178305/article/details/112125789

版权

vue.js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

父子组件通信方式二

父子组件通信方式一（props/$emit）
父子组件通信方式三（$parent/$children）
ref 给元素或子组件注册引用信息
$refs 获取通过 ref 注册的引用
案例：子组件通过props接收父组件的数据，父组件通过ref、 $refs获取子组件的数据
子组件

<template>
    <div>
        <h1>{{title}}
            <button>emit</button>
            <input type="text" ref="input">
        </h1>
        child
    </div>
</template>
<script>
    export default {
        props: ["title"],
        methods: {
            getTitle() {
                return this.title
            },
        },
    }
</script>
<style lang="scss" scoped>
</style>

父组件

<template>
    <div>
        Parent
        <Child title="my name is Parent" ref="compA"></Child>
    </div>
</template>
<script>
import Child from "./Child";
    export default {
        components: {
            Child,
        },
        mounted () {
            console.log(this.$refs.compA.getTitle());
            this.$refs.input.focus();
        },
    }
</script>
<style lang="scss" scoped>
</style>