vue 子组件通过（订阅/发布）传递数据给父组件

<!DOCTYPE html>
<html>

<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <title>Title of the document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <div id="app">
        <p>总数: {{ total }}</p>
        <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
    </div>
</body>
<script>
    Vue.component('my-component', {
        template: '\
        <div>\
            <button @click="handleIncrease">+1</button>\
            <button @click="handleReduce">-1</button>\
        </div>',
        data: function() {
            return {
                counter: 0
            }
        },
        methods: {
            handleIncrease: function() {
                this.counter++;
                this.$emit('increase', this.counter);
            },
            handleReduce: function() {
                this.counter--;
                this.$emit('reduce', this.counter);
            }
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            handleGetTotal: function(total) {
                this.total = total;
            }
        },
        computed: {

        }
    })
</script>

</html>

vue 子组件通过（订阅/发布）传递数据给父组件

推荐阅读更多精彩内容