vue 父子組件之間訪問 this.$refs 和 this.$parent _fei

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>