24vue学习_父组件调用子组件$children,$refs

最新推荐文章于 2023-08-12 10:28:25 发布

chencaw

最新推荐文章于 2023-08-12 10:28:25 发布

阅读量376

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113740329

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

正常情况下都用$refs

1父组件调用子组件$children

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <button @click="btnClick">按钮</button>      
    </div>
    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
           我是子组件
        </div>            
    </template>

    <script src="../js/vue.js"></script>
    <script>
      
        //1、2父组件中直接创建子组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '你好啊'
            },
            methods: {
                btnClick(){
                     console.log(this.$children);
                    // this.$children[0].showMessage();
                    //  console.log(this.$children[0].name);
                    for(let c of this.$children){
                        console.log(c.name);
                        c.showMessage();
                    }
                }

            },
            components:{
                cpn:{
                    template: '#cpn1',
                    data(){
                        return{
                            name:'我是子组件的name'
                        }                   
                    },
                    methods:{ 
                        showMessage(){
                            console.log('showMessage'); 
                        }            
                    }
                }
            }     
        })
    </script>
</body>

2、采用$refs方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <cpn></cpn>
        <cpn></cpn>
        <!-- $refs用到 -->
        <cpn ref='aaa'></cpn>
        <button @click="btnClick">按钮</button>      
    </div>
    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
           我是子组件
        </div>            
    </template>

    <script src="../js/vue.js"></script>
    <script>
      
        //1、2父组件中直接创建子组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '你好啊'
            },
            methods: {
                btnClick(){
                    // //1.$children方式
                    //  console.log(this.$children);
                    // // this.$children[0].showMessage();
                    // //  console.log(this.$children[0].name);
                    // for(let c of this.$children){
                    //     console.log(c.name);
                    //     c.showMessage();
                    // }

                    //2.$refs方式
                    console.log(this.$refs);
                    console.log(this.$refs.aaa.name);
                    this.$refs.aaa.showMessage();
                }

            },
            components:{
                cpn:{
                    template: '#cpn1',
                    data(){
                        return{
                            name:'我是子组件的name'
                        }                   
                    },
                    methods:{ 
                        showMessage(){
                            console.log('showMessage'); 
                        }            
                    }
                }
            }     
        })
    </script>
</body>