vue 父子组件之间访问 this.$refs 和 this.$parent

01) vue 父组件访问子组件 this.$refs

<div id="app">
    {{ message }}
    <button value="点击" @click="p_click">点击获取子组件</button>
    <children_fei ref="children_ref"> </children_fei>
</div>
<template id="children_foo"> <!--子组件-->
    <div><button  value="点击">点击</button></div>
</template>
<script src="vue.js"></script>
<script>
    const children_fei = {
        template: '#children_foo',
        data() {
            return {
                children_message: "我是子组件bar"
            }
        },
        methods: {

        }
    };

    const app = new Vue({
        el: '#app',
        data() {
            return {
                message: 'Hello Vue!'
            }
        },
        methods: {
            p_click:function () { // 访问子组件 children_message
                console.log(this.$refs.children_ref.children_message);
            }
        },
        components: {
            children_fei
        }
    });
</script>

 

02) vue 子组件访问父组件 this.$parent

<div id="app">
    {{ message }}
    <children_fei> </children_fei>
</div>
<template id="children_foo"> <!--子组件-->
    <div><button  value="点击" @click="ccc_click">点击</button></div>
</template>
<script src="vue.js"></script>
<script>
    const children_fei = {
        template: '#children_foo',
        data() {
            return {children_message: "我是子组件bar"}
        },
        methods: {
            ccc_click: function () {
                console.log(this.$parent.message);
            }
        }
    };
    const app = new Vue({
        el: '#app',
        data() {
            return {message: 'Hello Vue!'}
        },
        methods: {},
        components: { children_fei }
    });
</script>