子組件調用父組件的數據及方法

時間 2019-11-08

標籤組件調用數據方法简体版

原文原文鏈接

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <com1 v-bind:parenting="parentDate"></com1>
        <!-- 這裏想用調用父組件中的數據，必須爲父組件的數據綁定一個名稱，而且該名稱在子組件中利用props屬性進行定義 -->
        <com2 @fun="show"></com2>
        <!-- 這裏同理，爲父組件的方法綁定一個別稱 -->
    </div>
    <template id="temp2">
        <div @click="myclick">
            <h3>這是子組件2</h3>
        </div>
    </template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    let com2 = {
        template:'#temp2',
        methods:{
            myclick(){
                //此時利用emit方法來觸發父組件傳過來的方法
                this.$emit('fun');//子組件也能夠經過這個方法進行傳參操做
            }
        }
    }
    let vm = new Vue({
        el: "#app",
        data: {
            parentDate: "我是父組件的數據" //子組件不能直接調用父組件中的數據
        },
        //定義父組件的方法
        methods:{
            show(){
                alert('成功調用了父組件的方法');
            }
        },

        components: {

            com1: {
                data() {//子組件內數據都是可讀可寫的
                    return {
                        msg: "hello"
                    }
                },
                //從父組件獲取的數據爲只讀，不要去修改，。。即便能修改
                template: "<h3>{{msg}}這是子組件-----{{ parenting }}</h3>", //綁定並聲明完成後便可調用，注意此時的名稱爲定義的名稱
                props: ['parenting'] //綁定數據名稱的聲明
            },

            com2:com2
        }
    });
</script>

</html>

　　效果圖：html

相關標籤/搜索