Vue父子组件之间属性访问

最新推荐文章于 2024-02-26 14:22:21 发布

bugsayend

最新推荐文章于 2024-02-26 14:22:21 发布

阅读量384

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42707967/article/details/115879063

版权

本文介绍了Vue中父子组件之间的属性访问方法，包括父组件如何通过this.$children和this.$refs访问子组件属性，以及子组件如何利用this.$parent和this.$root访问父组件和根组件的属性。详细阐述了$children和$refs的区别，以及使用注意事项。

摘要由CSDN通过智能技术生成

一.父子组件之间属性访问

通常父子组件是可以进行属性访问的，例如父组件调用子组件中的方法，变量等，这些都是可以通过拿到各自对应的父子组件对象，然后调用其属性，例如：
父组件访问子组件中的属性有两种方式

在父组件中使用this.$children拿到所有的子组件数组对象，然后索引访问对应子组件中的方法，变量等属性
通过this.$refs(子组件名称来访问)，这种相比于第一种就是可以通过子组件的具体名称来访问了，避免索引顺序改变问题

1.1 父组件访问子组件（this.$children,this.$refs）

1.$children获取子组件对象列表

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>父子组件访问</title>
        <script src="./vue.js"></script>
        <style>
            [v-cloak] {
    
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <component1></component1>
            <button @click="btnclick">按钮</button>
        </div>

        <template id="content">
            <div>
                <span>子组件中的内容</span>
            </div>
        </template>
    
        <script>
            const vm = new Vue({
    
                el:"#app",
                data:{
    

                },
                methods:{
    
                    btnclick(){
    
                        console.log(this.$children); // this.$children返回的数所有子组件对象的数组
                        this.$children[0].