Question

我有一个第三方组件<third-party-component />，它接受以下事件：

onAdd, onRemove, onUpdate

我想围绕它创建一个包装器组件，并希望动态传递这些事件，以便可以处理包装器组件中的响应，例如 wrapper.js

<template>
    <div class="my-wrapper">
        <third-party-component />
    </div>
<template>

using-wrapper.js

<template>
    <div>
        ...
        <wrapper @onAdd="add" @onRemove="remove"></wrapper>
        ...
    </div>
</template>
<script>
export default {
    methods: {
        onAdd() {
            console.log('on add in using-wrapper.js');
        },
        onRemove() {
            console.log('on remove in using-wrapper.js');
        }
    }
}
</script>

Answer 1

您可以通过使用v-bind和v-on绑定它们来传递所有属性和侦听器

您还需要将inheritAttrs设置为false https://vuejs.org/v2/api/#inheritAttrs

<template>
    <div class="my-wrapper">
        <third-party-component v-bind="$attrs" v-on="$listeners"/>
    </div>
<template>

using-wrapper.js

<template>
    <div>
        ...
        <wrapper @onAdd="add" @onRemove="remove"></wrapper>
        ...
    </div>
</template>
<script>
export default {
    inheritAttrs: false,
    methods: {
        onAdd() {
            console.log('on add in using-wrapper.js');
        },
        onRemove() {
            console.log('on remove in using-wrapper.js');
        }
    }
}
</script>

Answer 2

在“包装器”上，您将需要创建3种方法来侦听并在“第三方组件”上被触发。

<template>
<div class="my-wrapper">
    <third-party-component @onAdd="wrapperAdd" @onRemove="wrapperRemove" @onUpdate="wrapperUpdate" />
</div>

<script>
export default {
   methods:{
     wrapperAdd(){
       this.$emit("onAdd",{obj that will get to the parent});
     }
   }
}

我只做了一种方法，因为其他两种方法相似。

vuejs动态传递给子级的方法

2 个答案: