初识vue(9)——组件父子直接访问

最新推荐文章于 2022-10-14 09:49:42 发布

源魔方

最新推荐文章于 2022-10-14 09:49:42 发布

阅读量66

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45149720/article/details/108764903

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

父访问子

主要使用2个方法$ children、$ refs。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="SHU"></cpn>
    <cpn></cpn>
    <button @click="getchild">查看子组件</button>
</div>
</body>
<template id="cpn">
    <div>
        <h1>{{name}}</h1>
    </div>
</template>
<script>
    const cpn={
        template:'#cpn',
        data(){
            return{
                name:"Ssshu"
            }
        }
    }
    Vue.component("cpn",cpn);
    const app = new Vue({
        el:'#app',
        data:{
            message:'Shu',
        },
        methods:{
            getchild(){
                console.log(this.$children);
                console.log(this.$children[0].name);
                console.log(this.$refs.SHU.name);
            }
        },
    })
</script>
</html>

这里使用$children可以访问到所有子组件的所有信息，当要具体访问某一个子组件里面的内容的时候，改变 $children数组下标值就行了，就算只用了一个组件，也会默认在 $children里面生成数组，这个时候【0】就是唯一那个数组。而且在 $children里面数组指向组件的顺序就是你在上面html中使用的顺序，自上到下。

这里会发现一个问题： $children固然可以访问到子组件，但是因为采用数组的形式，方法里面下标是固定的，组件的优点在于复用性，如果在复用的时候改变了顺序，或者增加删除了组件，那么方法里面的数组下标也应该手动去改变，这样就麻烦了，不利于维护。

所有这里采用常常是 $refs的方法，只需要在要访问的地方refs绑定一个标记用与访问就行。

子访问父

采用 $parent方法访问父组件
采用 $root方法访问根组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

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

<template id="cpn">
    <div>
        <h2>我是cpn组件</h2>
        <ccpn></ccpn>
    </div>
</template>

<template id="ccpn">
    <div>
        <h2>我是子组件</h2>
        <button @click="btnClick">按钮</button>
    </div>
</template>


<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        name: '我是cpn组件的name'
                    }
                },
                components: {
                    ccpn: {
                        template: '#ccpn',
                        methods: {
                            btnClick() {
                                // 1.访问父组件$parent
                                // console.log(this.$parent);
                                // console.log(this.$parent.name);

                                // 2.访问根组件$root
                                console.log(this.$root);
                                console.log(this.$root.message);
                            }
                        }
                    }
                }
            }
        }
    })
</script>

</body>
</html>