威尼斯wns.9778官网活动_vnsc威尼斯城官网

热门关键词: 威尼斯wns.9778官网活动,vnsc威尼斯城官网
当前位置:威尼斯wns.9778官网活动 > 计算机教程 > Vue 组件通信(子组件向父组件传递数据)

Vue 组件通信(子组件向父组件传递数据)

文章作者:计算机教程 上传时间:2019-05-10

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="http://www.itcinternet.net/uploads/allimg/190510/22044952a-0.jpg"></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="http://www.itcinternet.net/uploads/allimg/190510/22044952a-0.jpg"></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>

 

本文由威尼斯wns.9778官网活动发布于计算机教程,转载请注明出处:Vue 组件通信(子组件向父组件传递数据)

关键词: