vue父组件向子组件传递方法

最新推荐文章于 2024-07-23 14:29:05 发布

楠啊#

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量698

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45083936/article/details/117328169

版权

笔记专栏收录该内容

40 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传递方法</title>
    <script src="../../vue/vue-v2.6.11.js"></script>

</head>
<body>
<div id="app">
    <!-- 这里的show方法后面不能加(),如果加了()
        就是把show方法执行完的结果传到子组件了 -->
    <com @func="show"></com>
</div>

<template id="tmpl">
    <div>
        <button @click="sonShow">这是子组件中的按钮</button>
    </div>
</template>
</body>
<script>

    var com = {
        template: '#tmpl',
        methods: {
            sonShow() {
                // 调用父组件传递过来的方法
                // this.$emit('func');

                // 如果需要传递参数的话,在后面添加即可

                // !!!===== 用此方法可以将子组件中的数据传递给父组件 =====!!!

                // this.$emit('func', data1, data2...);
                this.$emit('func', 'jhh');
            }
        }
    };
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            show (data){
                console.log('调用了父组件中的show方法' + data);
            }
        },
        components: {
            com
        }
    });
</script>
</html>