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

最新推荐文章于 2023-07-15 00:20:26 发布

我爱丁丁猫

最新推荐文章于 2023-07-15 00:20:26 发布

阅读量98

点赞数

分类专栏：前端文章标签： vue 组件通信

原文链接：https://www.mk2048.com/blog/blog.php?id=h0a1cci2jkaa&title=Vue+%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%EF%BC%88%E5%AD%90%E7%BB%84%E4%BB%B6%E5%90%91%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE%EF%BC%89

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

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>

更多专业前端知识，请上【猿2048】www.mk2048.com

我爱丁丁猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 组件通信（子组件向父组件传递数据）

1、自定义事件 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Vue</title> </head> ...
复制链接

扫一扫