1. 程式人生 > >Vue中子元件呼叫父元件的方法

Vue中子元件呼叫父元件的方法

Vue中子元件呼叫父元件的方法

相關Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.4.0.js"></script>

    <style>

    </style>
</head>
<body>
<div id="app">
    <!--父元件可以在引用子元件的時候,通過屬性繫結的形式(v-bind:),-->
    <!--把需要傳遞給子元件的資料,以屬性繫結的形式傳遞到子元件中 給子元件使用-->

    <com2 @func="show"></com2>
</div>

<template id="temp1">
    <div>

        <h1>這是子元件</h1>
        <input type="button" value="這是子元件按鈕 點選後觸發父元件的func方法"

               @click="myclick"
        >
    </div>
</template>

<script>
    var com2 = {
        template: '#temp1',
        data: function () {
            return {
                sonmsg: {name: '大頭兒子', age: 6}
            }

        },
        methods: {
            myclick: function () {
                //當點選子元件的按鈕的時候如何拿到父元件的func方法 並呼叫
                //$emit() 原意:觸發
                //第二個引數可以傳參
                this.$emit('func', this.sonmsg);
                console.log('ok');

            }

        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            datamsgFromSon: null
        },
        methods: {
            show: function (data) {
                console.log("呼叫了父元件的func,並且data為:" + data);
                console.log(data);
                this.datamsgFromSon = data;
            }

        },
        components: {
            com2: com2
        }
    });

</script>

</body>
</html>