vue父子组件的访问

父组件访问子组件

通过$refs ，在开发中常用

        第一步：组件引用信息

                <Hello :msg="msg" :aa='123455' bb="123" ref="hello"/>

                <p ref="p">{{ msg }}</p>

        第二步 使用，访问组件信息

        console.log(this.$refs);

子组件访问父组件

        直接通过this.$parent

        组件的复用行很高，开发中很少使用，一般使用props来传值

子组件访问跟组件

        直接通过this.$root

Content.vue 

<template>
    <div style="border:1px solid;margin-bottom: 50px; ">
        <!-- 父子组件的访问方式 -->
        <!-- 父组件访问子组件：$refs （开发中常用） -->
        <!-- 第一步：组册引用信息 -->
        <!-- 子组件访问父组件：直接通过this.$parent 组件的复用行很高，开发中很少使用，一般使用props来传值 -->
        <!-- 子组件访问跟组件：直接通过this.$root  -->
        <Hello :msg="msg" :aa='123455' bb="123" ref="hello"/>
        <p ref="p">{{ msg }}</p>
    </div>
</template>
<script>
import Hello from './Hello.vue'
export default {
    data() {
        return {
            msg: 'helloword'
        }
    },
    components: {
        Hello
    },
    mounted(){
        // 第二步：访问子组件
        // console.log(this.$refs);
    }
}
</script>

Hello.vue

<template>
    <p>我是Helo组件</p>
    <p>msg:{{ msg }}</p>
    <p>aa静态传值数字:{{ aa }}</p>
    <p>bb静态传值字符串:{{ bb }}</p>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    mounted(){
        console.log(this.$parent);
        console.log(this.$root)
    },
    props: {
        msg: {
            type: String,//类型限制
            defult: '你好呀',//默认值
            requried: true //设置为比传
        },
        aa: {
            type: Number,//类型限制
            defult: 123456,//默认值
            requried: true //设置为比传
        },
        bb: {
            type: String,//类型限制
            defult: '1222',//默认值
            requried: true //设置为比传
        },
    }



}
</script>