I'd like to use snake_case
on the names of components when I call its name on the tag within the template. I just tried:
<script>
import footer-goodfooter from "@/comp/footer/c_footer.vue";
^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 'import ... =' can only be used in TypeScript files.Vetur(8002)
export default {
name: 'App',
components: {
footer-goodfooter,
^
// ',' expected.Vetur(1005)
},
But I want my component(in this case, footer-goodfooter) below inside the template like this:
<main>
<header-bigheader />
<content-fat-superfat-hallelujah />
<footer-goodfooter />
</main>
How can I achieve this? Thank you.
Components are PascalCase
in Vue, but in the template they can be called via kebab-case
<template>
<footer-good-footer />
</template>
<script lang="ts">
import FooterGoodFooter from "@/comp/footer/c_footer.vue";
export default {
name: 'App',
components: {
FooterGoodFooter, // OR 'custom-name': footerGoodFooter
}
}
</script>
AFAIK the file name should not matter here.
See: https://v2.vuejs.org/v2/guide/components-registration.html#Local-Registration
I really don´t know if I understand your question. But if you want to achieve to call a component in your template like:
<single-filter-container></single-filter-container>
... then just do the export in the singleFilterContainer.vue like:
export default {
name: "singleFilterContainer"
}
... import this component into it´s parent like:
import SingleFilterContainer from "@/components/singleFilterContainer";
... and use it in your template like:
<single-filter-container></single-filter-container>
As far es I know, this is a normal usecase, so there shouldn´t be any workaround needed. It is recommended in the Style Guide of Vue.js. Please try it as I mentioned and give some feedback, if it doesn´t work.
If so, we can check if there is any problem with one of your modules or your IDE have a plugin for autocomplete this for you. I am using Vue 3
and working on IntelliJ
with Vue.js plugin.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.