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

正常情况下都用$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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值