VUE子父组件通信

最新推荐文章于 2023-09-07 15:55:31 发布

吃瓜的阳大王

最新推荐文章于 2023-09-07 15:55:31 发布

阅读量123

点赞数

文章标签： vue.js html5

本文链接：https://blog.csdn.net/qq_44822110/article/details/104782437

版权

VUE子父组件通信实现点击显示余额

HTML代码

this.$emit()方法：触发事件快捷方式传两个值，第一个值为要触发事件的名字第二个值为数据

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子父组件通信</title>

</head>

<body>
    <div id="seg1">
        <balance></balance>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS代码

Vue.component('balance', {
    // 触发@show-balance事件并执行methods里的show_balance方法       v-if=true时显示余额
    template: '<div><show @show-balance="show_balance"></show><div v-if="show">您的余额为￥100元</div></div>',
    data: function () {
        return {
            show: false,
        }
    },
    methods: {
        // 把show的值改为true让余额显示出来同时用data接收了a 和 b的值
        show_balance: function (data) {
            this.show = true;
            console.log('data:', data);

        }
    }
})
Vue.component('show', {
    // 点击事件发生时触发on_click()方法
    template: '<button @click="on_click()">显示余额</button>',
    methods: {
        // 在on_click()方法被触发时同时调用show-balance方法并把 a 和 b 的值传给调用者
        on_click() {
            // $emit 触发事件快捷方式
            this.$emit('show-balance', {
                a: 1,
                b: 2
            })
        }
    }
})

var app = new Vue({
    el: '#seg1'
})