当前位置： 文江博客话题详情

vue父组件中引入子组件，子组件slot插槽中写入另一个子组件，如何获取另一个子组件$emit传到父组件的值？

发布于 2022-09-11 20:25:22 字数 479 浏览 8 评论 0

示例代码如下：
父组件：

<div>
    <child>
       <child-two @getlist='getList'></child-two>
    </child>
</div>

methods:{
    getList(val){
       console.log(val)  //这里获取不到，
    }
}

子组件 child：

<div><slot></slot></div>

子组件child-two:

<div></div>
methods:{
    rowClick(row){
       this.$emit('getlist',row.list)
    }
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

つ低調成傷 2022-09-18 20:25:22

组件数据通信常用的有三种方式，属性传递，事件传递，或者vue store。你上面写法看起来没问题，可能是你没触发rowClick，或者触发了传递参数为空。
下面是正确的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>created by jsdt</title>
    <script src="./vue2.2.6.js"></script>
</head>
<body>
<script type="text/x-template" id="child">
    <div><slot></slot></div>
</script>

<script type="text/x-template" id="child-two">
    <div @click="rowClick">test</div>
</script>

<div id="example">
    <div>
        <child>
            <child-two @getlist='getList'></child-two>
        </child>
    </div>

</div>
</body>
<script>
    Vue.component('child', {
        template: '#child'
    })
    Vue.component('child-two', {
        template: '#child-two',
        methods:{
            rowClick(row){
                this.$emit('getlist','rowclick')
            }
        }
    })
    var vm = new Vue({
        el: '#example',
        methods:{
            getList(val){
                console.log(val) 
            }
        }
    })
</script>
</html>
回复
赤濁 2022-09-18 20:25:22

能说下你这样写是为了实现什么功能吗？

回复
~没有更多了~

关于作者

故人的歌

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

謌踐踏愛綪

文章 0 评论 0

开始看清了

文章 0 评论 0

高速公鹿

文章 0 评论 0

alipaysp_PLnULTzf66

文章 0 评论 0

热情消退

文章 0 评论 0

白色月光

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文