时间戳

首页 > 解决方案 > Vuejs3 扩展另一个组件或方法

vue.js - Vuejs3 扩展另一个组件或方法

问题描述

我如何扩展另一个组件？

我的主要组件

主组件.vue

<template>
    <div>
        empty
    </div>
</template>

<script>
    export default {
        methods: {
            sendAlert(msg) {
                alert(msg);
            }
        }
    }
</script>

第二组分；

第二组件.vue

<template>
    <div>
        <button @click="MainComponent.methods.sendAlert('first try')"></button>
        <!--OR-->
        <button @click="sendAlert('second try')"></button>
    </div>
</template>

<script>

    import MainComponent from "./MainComponent.vue"

    export default {
        extends: { MainComponent },
        methods: {
            ...MainComponent.methods
        }
    }
</script>

我无法访问方法。我该怎么做？

注意：（我不想要这个）

<template>
    <div>
        <button @click="sendAlert('second try')"></button>
    </div>
</template>

<script>

    import MainComponent from "./MainComponent.vue"

    export default {
        extends: { MainComponent },
        methods: {
            Message(msg) {
                MainComponent.methods.sendAlert(msg);
            }
        }
    }
</script>

所以我在一个组件中有一个或多个方法。如何在另一个组件中使用这些方法？

标签： vue.jsvuejs3

解决方案

如果您想使用相同的方法甚至相同的属性，您可以创建 mixins.js 文件

export const YouMixins = {
    methods: {
        sendAlert(msg) {
            alert(msg);
        }    
    }
}

然后在你的第二个组件中

<template>
    <div>
        <button @click="sendAlert('first try')"></button>
        <!--OR-->
        <button @click="sendAlert('second try')"></button>
    </div>
</template>

<script>
    import { YouMixins } from "./mixins.js"

    export default {
        mixins: [YouMixins],
    }
</script>

请注意，您不仅可以传递方法，甚至可以传递计算、数据、生命周期等

推荐阅读