组件访问-父访问子-refs

最新推荐文章于 2022-05-23 22:00:00 发布

新手小白请求出战！

最新推荐文章于 2022-05-23 22:00:00 发布

阅读量155

点赞数 1

分类专栏：前端笔记文章标签： javascript html5 es6 vue.js

本文链接：https://blog.csdn.net/qq_41138726/article/details/109824955

版权

前端笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1.使用$children的方法

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <button @click="btnClick">按钮</button>
    </div>
    <template id="cpn">
        <div>我是子组件</div>
    </template>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            },
            methods:{
                 btnClick(){
                     console.log(this.$children);
                     for(let c of this.$children){
                        console.log(c.name);
                        c.showMessage();
                     }
                     
                 } 
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data(){
                          return {
                             name:"我是子组件的name" 
                          }
                    },
                    methods: {
                        showMessage() {
                            console.log('showMessage');

                        }
                    }
                }
            }
        })
    </script>
</body>

2.使用$refs的方法(这种更常用)

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn ref="aaa"></cpn>
        <button @click="btnClick">按钮</button>
    </div>
    <template id="cpn">
        <div>我是子组件</div>
    </template>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            },
            methods: {
                btnClick() {
                 
                    // 2.$refs(这种用法比较多-> 对象类型，默认是一个空的对象，ref='')
                    console.log(this.$refs.aaa.name);

                }
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data() {
                        return {
                            name: "我是子组件的name"
                        }
                    },
                    methods: {
                        showMessage() {
                            console.log('showMessage');

                        }
                    }
                }
            }
        })
    </script>
</body>