前端小白入门Vue之父子组件之间的访问

---

前言

父组件向子组件中传递数据时，我们可以采用在子组件中的props中进行传递。 子组件向父组件中传递数据时，我们可以采用在子组件中使用$emit,自定义事件，在父组件中定义改事件的接收。 今天我们继续来学习Vue中更加方便的实现父子组件的访问。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、父组件访问子组件（children）

1.通过this.$children我们就能获取子组件中的数据2.通过this.$children[第几个子组件]，就能获取第几个子组件的数据

    <div id="app">
        <cpn></cpn>
        <button @click="btnChildren">通过children获取子组件的数据</button>
    </div>
    <template id="cpn">
        <div>
            我是子组件
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            },
            methods: {
                btnChildren() {
                    // 拿到我们获取子组件中的方法
                    this.$children[0].showMessage();
                    // 拿到我们获取子组件中的数据
                    console.log(this.$children[0].name)
                }
            },
            components: {
                'cpn': {
                    template: '#cpn',
                    data() {
                        return {
                            name: "我是子组件的name"
                        }
                    },
                    methods: {
                        showMessage() {
                            console.log("我是子组件的message")
                        }
                    }

                }
            }
        })
    </script>

运行结果如下：

    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
	</div>

但是这样就会带来一个弊端，当我们在子组件上方又插入一个子组件，组件的序号就会被打乱，获取的也是插入这个组件的数据，所有说this.$children的这个方法不是经常进行使用。
由之而来的，我们将学习refs

二、父组件访问子组件（refs）

1.通过在子组件中设立resf标志，这样我们就能通过这个标志拿到这个子组件的数据

    <div id="app">
        <cpn></cpn>
        <cpn ref="aaa"></cpn>
        <cpn></cpn>
        <button @click="btnChildren">通过children获取子组件的数据</button>
    </div>
    <template id="cpn">
        <div>
            我是子组件
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            },
            methods: {
                btnChildren() {
                    // 通过refs我们就能获取该子组件中的数据
                    // $refs => 对象类型，默认是一个空的对象
                    this.$refs.aaa.showMessage();
                    console.log(this.$refs.aaa.name);
                }
            },
            components: {
                'cpn': {
                    template: '#cpn',
                    data() {
                        return {
                            name: "我是子组件的name"
                        }
                    },
                    methods: {
                        showMessage() {
                            console.log("我是子组件的message")
                        }
                    }

                }
            }
        })
    </script>

运行结果如下：

三、子组件访问父组件、根组件（parent、root）

    <div id="app">
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            我是cpn组件
            <ccpn></ccpn>
        </div>
    </template>
    <template id="ccpn">
        <div>
            我是ccpn组件
            <button @click="getParent">获取父组件的事件</button>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            },
            components: {
                'cpn': {
                    template: '#cpn',
                    data() {
                        return {
                            name: "我是cpn的name"
                        }
                    },
                    components: {
                        'ccpn': {
                            template: '#ccpn',
                            methods: {
                                getParent() {
                                    // 使用parent获取父组件的数据
                                    console.log(this.$parent.name);
                                    // 使用root获取根组件的数据
                                    console.log(this.$root.message)
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>

运行结果如下：

---

总结

本次我们学习了Vue中父子组件之间访问的简便方法
1.父访子（children）（refs）
2.子访父（parent）（root）

今日推荐

UI：墨刀-用于设计软件UI的免费网站-拥有大量UI模板