vue父子组件的访问方式($children || $refs & $parent)

3月

本文最后更新于2020年03月21日，已经过了1763天没有更新，若内容或图片失效，请留言反馈

有时候我们需要父组件直接访问子组件或子组件直接访问父组件

父组件访问子组件使用$children或$refs，开发中一般使用$refs
子组件访问父组件使用$parent

使用$children访问子组件

this.$children返回的是一个数组，里面包含了所有子组件对象。
这里我们通过遍历取出所有子组件message的状态

text 代码:

<body>
    
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <button type="button" @click='btnclick'>click</button>
    </div>
    
    <!-- 定义HTML模板 -->
    <template id="test">
        <div>
            this is children
        </div>
    </template>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        
        // 定义子组件
        const cpn = {
            template:'#test',
            data(){
                return{
                    message:"this id child"
                }
            }
        }
        
        // 创建vue实列
        const app = new Vue({
            el:"#app",
            data:{
                
            },
            
            methods:{
                btnclick(){
                    // 通过遍历取出所有子组件中message的状态
                    for(let item of this.$children) {
                        console.log(item.message);
                    }
                }
            },
            
            // 注册子组件
            components:{
                cpn
            },
        })
    </script>        
</body>

使用$refs访问子组件

this.$refs返回的是一个子组件对象
使用时要给子组件添加一个ref属性

父组件通过this.$refs.child1访问这个子组件

text 代码:

<body>
    
    <div id="app">
        <cpn ref="child1"></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <button type="button" @click='btnclick'>click</button>
    </div>
    
    <!-- 定义HTML模板 -->
    <template id="test">
        <div>
            this is children
        </div>
    </template>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        
        // 定义子组件
        const cpn = {
            template:'#test',
            data(){
                return{
                    message:"this id child"
                }
            }
        }
        
        // 创建vue实列
        const app = new Vue({
            el:"#app",
            data:{
                
            },
            
            methods:{
                btnclick(){
                    //取出ref属性为child1的子组件的message 
                    console.log(this.$refs.child1.message);
                }
            },
            
            // 注册子组件
            components:{
                cpn
            },
        })
    </script>
</body>

之所以推荐使用$refs是因为$children获取到的是数组，要通过下标获取某个子组件，但数组元素的下标是会改变的。
假设一个父元素中有三个子组件

text 代码:

    <father>
        <child1></child1>
        <child2></child2>
        <child3></child3>
    </father>

父组件要通过this.$children访问child2

text 代码:

     this.$children[1]

但若在获取完之后在child1和child2之间插入了一个新的子组件new-child

text 代码:

    <father>
        <child1></child1>
        <new-child></new-child>
        <child2></child2>
        <child3></child3>
    </father>

这时的this.$children[1]访问到的会是

使用$parent访问父组件

如果使用子组件访问父组件，它们之间的耦合度会提高，降低组件的独立性，不利于组件的复用。所以这里不做介绍，网上了解即可。

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢