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

发布于
2019-06-10

示例代码如下：
父组件：

<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)
    }
}

vue.js element element-ui javascript

阅读 5.8k

3 个回答

jsdt

✓ 已被采纳

组件数据通信常用的有三种方式，属性传递，事件传递，或者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>