将静态组件修改为动态组件

Question

我是Vuejs的新手，我目前正在使用组合API，我有一个nav组件，其中我有一个Array称为tabs，因为你可以看到数组是静态的。

所以我想做这个动态，并从另一个组件发送props。我读到过那件事，但我一点也不明白。

假设我可以用一个模型来改变我的组件数组:

const tabs<MyModel>

然后我可以从另一个组件发送它，但是我迷路了

<<p>导航组件/strong>

<template>
<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<select
id="tabs"
name="tabs"
class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
>
<option v-for="tab in tabs" :key="tab.name" :selected="tab.current">
{{ tab.name }}
</option>
</select>
</div>
<div class="hidden sm:block">
<nav class="flex items-center space-x-4">
<a
v-for="tab in tabs"
:key="tab.name"
:href="tab.href"
:class="[
tab.current
? 'bg-purple-70 q0 text-white'
: 'text-purple-700 hover:text-gray-700',
'px-12 py-2 rounded-full font-bold text-xl',
]"
@click="changeTab(tab)"
>
{{ tab.name }}
</a>
</nav>
</div>
<div class="hidden sm:block">
<div
v-for="tab in tabs"
:key="tab.name"
:href="tab.href"
class="px-12 flex justify-center"
:class="[tab.current || 'hidden']"
@click="changeTab(tab)"
>
{{ tab.id }} - {{ tab.name }} - {{ tab.href }} - {{ tab.title }}
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from '@vue/composition-api'
import i18n from '@/setup/i18n'
export default defineComponent({
name: 'ProgramModal',
setup() {
const ariaLabel = computed(() => i18n.t('share') as string)
const tabs = ref([
{
id: 1,
title: 'test title one',
imageSrc: '/programs/test1.png',
content: '',
name: 'LOREM',
href: '#test1',
current: true,
},
{
id: 2,
title: 'test title two',
imageSrc: '/programs/test2.png',
content: '',
name: 'IPSUM',
href: '#test2',
current: false,
},
{
id: 3,
title: 'test title three',
imageSrc: '/programs/test3.png',
content: '',
name: 'PDF',
href: '#test3',
current: false,
},
])
const changeTab = (selectedTab: { id: number }) => {
tabs.value.map((t) => {
t.id === selectedTab.id ? (t.current = true) : (t.current = false)
})
}
return {
tabs,
changeTab,
ariaLabel,
}
},
})
</script>

我要发送参数的组件:

<template>
<ProgramModal />
</template>

<script lang="ts">
import ProgramModal from '@/components/ProgramModal.vue'
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'Home',
components: {
ProgramModal,
},
setup() {
const isModalOpen = ref(true)
const showModal = () => {
isModalOpen.value = true
}
return {
isModalOpen,
showModal,
}
},
})
</script>

我如何改变这个逻辑来接收不同的值?关于

Answer 1

两种方案，props或composable:

1。使用道具:

您可以在Home组件中创建tabs并传递给ProgramModel:

<template>
<ProgramModal :tabs="tabs" />
</template>

<script lang="ts">
import ProgramModal from '@/components/ProgramModal.vue'
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'Home',
components: {
ProgramModal,
},
setup() {
// ...
const tabs = ref([
{
id: 1,
title: 'test title one',
imageSrc: '/programs/test1.png',
content: '',
name: 'LOREM',
href: '#test1',
current: true,
},
{
id: 2,
title: 'test title two',
imageSrc: '/programs/test2.png',
content: '',
name: 'IPSUM',
href: '#test2',
current: false,
},
{
id: 3,
title: 'test title three',
imageSrc: '/programs/test3.png',
content: '',
name: 'PDF',
href: '#test3',
current: false,
},
])
return { tabs }
},
})
</script>

然后在ProgramModal组件中定义一个prop:

export default defineComponent({
name: 'ProgramModal',
props: {
tabs: Array as PropType<Array<Tab>>
},
setup() {
const ariaLabel = computed(() => i18n.t('share') as string)
const changeTab = (selectedTab: { id: number }) => {
tabs.value.map((t) => {
t.id === selectedTab.id ? (t.current = true) : (t.current = false)
})
}
return {
tabs,
changeTab,
ariaLabel,
}
},
})

2。使用可组合组件(推荐使用vu3)

您可以定义一个名为useTab:

的文件

// useTab.js
const tabs = ref([
{
id: 1,
title: 'test title one',
imageSrc: '/programs/test1.png',
content: '',
name: 'LOREM',
href: '#test1',
current: true,
},
{
id: 2,
title: 'test title two',
imageSrc: '/programs/test2.png',
content: '',
name: 'IPSUM',
href: '#test2',
current: false,
},
{
id: 3,
title: 'test title three',
imageSrc: '/programs/test3.png',
content: '',
name: 'PDF',
href: '#test3',
current: false,
},
]);
export default function (
const changeTab = (selectedTab: { id: number }) => {
tabs.value.map((t) => {
t.id === selectedTab.id ? (t.current = true) : (t.current = false)
})
}
return { tabs, changeTab }
)

那么，你可以在任何地方使用它。

// Home.vue
export default defineComponent({
name: 'Home',
components: {
ProgramModal,
},
setup() {
// ...
// By this way, you can change tab in Home or anywhere you want.
const { changeTab } = useTab();
return { }
},
})

// ProgramModal.vue
export default defineComponent({
name: 'ProgramModal',
setup() {
const ariaLabel = computed(() => i18n.t('share') as string)
const { tabs, changeTab } = useTab();
return {
tabs,
changeTab,
ariaLabel,
}
},
})

顺便说一下，方法2是真正的合成api。:)