Vue中父组件访问子组件

最新推荐文章于 2024-04-02 16:05:36 发布

Kikyo--

最新推荐文章于 2024-04-02 16:05:36 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/weixin_55803498/article/details/116495594

版权

** $c h i l d r e n * * 通过$ children方法能够让父组件访问子组件但是访问子组件时要么全部访问，要么以数组的形式在$children后加上索引号访问某一个子组件，如下所示。

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <button @click="btnClick">按钮</button>
    </div>
    <template id="cpn">
        <div>
            我是子组件
        </div>
    </template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        methods: {
            btnClick() {
                // console.log(this.$children);
                // this.$children[1].showMessage();
                // console.log(this.$children[1].name);
                //访问索引号为1的showMessage和name
                 for (let c of this.$children) {
                     console.log(c.name);
                     c.showMessage();
                     //访问全部子组件的name和showMessage
                 }
            }
        },
        components: {
            cpn: {
                template: "#cpn",
                data() {
                    return {
                        name: "我是子组件的name"
                    }
                },
                methods: {
                    showMessage() {
                        console.log('Message');
                    }
                }
            }
        }
    })
</script>

在这里插入图片描述
$refs
$refs方法能够通过给子组件相应的key值从而访问到特指的子组件，如下所示。

<body>
    <div id="app">
        <cpn></cpn>
        <cpn ref="key"></cpn>
        <button @click="btnClick">按钮</button>
    </div>
    <template id="cpn">
        <div>
            我是子组件
        </div>
    </template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        methods: {
            btnClick() {
                console.log(this.$refs.key.name);
                //访问ref值为key的子组件的name
            }
        },
        components: {
            cpn: {
                template: "#cpn",
                data() {
                    return {
                        name: "我是子组件的name"
                    }
                },
                methods: {
                    showMessage() {
                        console.log('Message');
                    }
                }
            }
        }
    })
</script>

在这里插入图片描述

Kikyo--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中父组件访问子组件

**children∗∗通过children**通过children∗∗通过children方法能够让父组件访问子组件但是访问子组件时要么全部访问，要么以数组的形式在$children后加上索引号访问某一个子组件，如下所示。<body> <div id="app"> <cpn></cpn> <cpn></cpn> <button @click="btnClick">
复制链接

扫一扫