Vue 父子组件的访问方式

作者: 稳小情 | 来源:发表于2020-05-13 12:54 被阅读0次

Vue相关知识点
Vue 父子组件的访问方式
vue父子组件的访问方式
2-8 vue全局属性
vue中组件之间的通信方式？
vue组件如何通信？有几种方式？
父子组件的访问方式
父子组件的访问方式
Vue学习笔记[09]-组件化进阶
(VUE3) 四、组件传值（父子组件传值 & 祖孙组件传值 &v

父组件访问子组件:使用 $children 或$ refs

$children使用的不多,只有想拿到所有子组件的时候才会用
$refs =>对象类型，默认是一个空的对象
下面则是实例！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn ref="aaa"></cpn> <!--ref=aaa可以指定！而children是想拿到所有子组件的时候才会用--->
        <button @click="dianji">点击</button>
    </div>
    <template id="cpn">
        <div>我是子组件</div>
    </template>
    <script>
        
        var vm = new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
                dianji:function(){
                    console.log(this.$refs.aaa.name) //父子访问子组件
                }
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return{
                            name:"这个哦"
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

子组件访问父组件:使用 $parent，访问根组件:$ root

下面会有实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <cpn></cpn> 
    </div>
    <template id="cpn">
        <div>
            <h1>我是父组件</h1>
            <ccpn></ccpn>
        </div>
    </template>
    <template id="ccpn">
        <div>
            <h4>这里是我们的子组件</h4>
            <button @click="eclick">{{mmm}}</button>
        </div>
    </template>
    <script>

        var vm = new Vue({
            el:"#app",
            data:{
                message:"这里是内容是我自己让直接访问根组件的某个部分的"
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return{
                            name:"这里是测试的"
                        }
                    },
                    components:{
                        ccpn:{
                            template:'#ccpn',
                            data(){
                                return{
                                    mmm:"稳小情"
                                }
                            },
                            methods:{
                                eclick(){
                                    //1.访问父组件$parent
                                    //console.log(this.$parent);
                                    //console.log(this.$parent.name);
                                    //2.访问根组件
                                    //console.log(this.$root);
                                    //console.log(this.$root.message)
                                }
                            }
                        }
                    }
                },
            }
        })
    </script>
</body>
</html>