Vue 组件通信（子组件向父组件传递数据）

2018-06-24 01:05:13来源：未知阅读 ()

1、自定义事件

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <p>总数：{{total}}</p>
            <!--自定义事件-->
            <my-component @increase='handleGetTotal' @reduce='handleGetTotal'></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                //下面两种都是处理为多行字符串

                //              template: '\
                //              <div>\
                //              <button @click="handleIncrease">+1</button>\
                //              <button @click="handleReduce">-1</button>\
                //              </div>',
                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)
                    }
                }
            })
            new Vue({
                el: "#app",
                data: {
                    total: 0
                },
                methods: {
                    handleGetTotal: function(total) {
                        this.total = total;
                    }
                }
            })
        </script>
    </body>

</html>

2、v-model

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <p>总数：{{total}}</p>
            <my-component v-model='total'></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: `<button @click="handleClick">+1</button>`,
                data: function() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    handleClick: function() {
                        this.counter++;
                        this.$emit('input', this.counter)
                    }
                }
            })
            new Vue({
                el: "#app",
                data: {
                    total: 0
                }
            })
        </script>
    </body>

</html>