Vuejs3 расширяет другой компонент или методы

Как я могу расширить другой компонент?

Моя основная составляющая

MainComponent.vue

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

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

и второй компонент;

SecondComponent.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.js vuejs3
person Amazon    schedule 12.04.2021    source источник
comment
У каждого фреймворка свой способ делать что-то, вы не можете пойти и попросить библиотеки сделать это по-своему. Тем не менее, если вы хотите делиться функциями, вам следует использовать миксины, то есть так, как это делается в стране Vue. Во Vue нет реальной концепции наследования и расширения другого представления.   -  person Mat J    schedule 12.04.2021
comment
Поместите метод sendAlert в какой-нибудь файл. Например. /use/alert.js, а затем импортируйте его в компоненты, которым он нужен, например import { sendAlert } from './use/alert'.   -  person rits    schedule 12.04.2021

Ответы (2)


arrow_upward
2
arrow_downward

Если вы хотите использовать тот же метод или даже те же атрибуты, вы можете создать файл 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>

Обратите внимание, что вы можете передавать не только методы, но даже вычисленные, данные, жизненные циклы и многое другое.

person ElizabethSetton    schedule 12.04.2021

arrow_upward
0
arrow_downward

Попробуйте использовать this для доступа к MainComponent методу:

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

<script>

    import MainComponent from "./MainComponent.vue"

    export default {
        extends: { MainComponent },
        methods: {
            Message(msg) {
                this.sendAlert(msg);
            }
        }
    }
</script>
person Boussadjra Brahim    schedule 12.04.2021
comment
Я не хочу этим пользоваться. Нет проблем, когда есть метод, но зачем мне писать снова и снова, когда есть 10 методов? - person Amazon; 12.04.2021
comment
как насчет extends: MainComponent , или использования миксинов - person Boussadjra Brahim; 12.04.2021