Vue中父组件向子组件传递方法

最新推荐文章于 2023-01-13 21:07:42 发布

键盘的打工仔

最新推荐文章于 2023-01-13 21:07:42 发布

阅读量686

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105520577

版权

请陛下批阅

<!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>

键盘的打工仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中父组件向子组件传递方法

请陛下批阅<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父组件向子组件传递方法</title> <script src="../../vue/vue-v2.6.11.js"></script...
复制链接

扫一扫