Vue.js 导入对象

Question

我在将对象从 App.vue 文件导入组件时遇到问题。但首先我应该解释一下这个项目的目的。有一个组件（导航抽屉）和一个 App.vue 文件。Navigation 抽屉里面有 vue 的 props，你可以在 App.vue 文件中动态改变它。问题是我只能使用 Navigation-Drawer 文件中的链接。我想编辑它，这样我就可以根据需要使用尽可能多的链接，甚至不必打开 Navigation-Drawer.vue 文件。在我详细介绍之前，这里是带有道具和有限数量链接的文件：应用程序.vue<template>  <div id="app">    <navigation-drawer    name1="TFBern"    name2="Stackoverflow"    name3="YouTube"    name4="Google"    link1="https://vuejs.org"    link2="https://stackoverflow.com"    link3="https://youtube.com"    link4="https://google.com"    />    <img alt="Vue logo" src="./assets/logo.png">    <HelloWorld msg="Welcome to Your Vue.js App"/>  </div></template><script>  import HelloWorld from './components/HelloWorld.vue'  import NavigationDrawer from './components/Navigation-Drawer.vue'  export default {    name: 'App',    components: {      HelloWorld,      NavigationDrawer      }    }</script>导航抽屉.vue<template>    <div class="navigationdrawer">        <span @click="openNav" style="fontsize:30px;cursor:pointer;display:flex;justify-content:center;">&#9776;</span>        <div id="mySidenav" class="sidenav">            <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>            <a v-bind:href="link1">{{ name1 }}</a>            <a v-bind:href="link2">{{ name2 }}</a>            <a v-bind:href="link3">{{ name3 }}</a>            <a v-bind:href="link4">{{ name4 }}</a>        </div>    </div></template><script>export default {    name: 'NavigationDrawer',    props: {        name1: String,        name2: String,        name3: String,        name4: String,        link1: String,        link2: String,        link3: String,        link4: String },</script>现在，我想到的是创建一个 js 对象，它可以将 App.vue 中的链接导入 Drawer。像这样的东西：<navigation-drawer links="[ {title="Google", link="www.google.ch"} , {title="Youtube", link="www.youtube.com"} , {title=…, link=…} ]"我真的不知道该怎么做...有人可以帮忙吗？

Answer 1

你已经非常接近答案了。更改=为:, 包围的值，'而不是"这样你就有一个对象列表

<navigation-drawer v-bind:links="[ {title:'Google', link:'www.google.ch'} , {title:'Youtube', link:'www.youtube.com'} , {title:…, link:…} ]"

然后导航抽屉道具看起来像：

props: {

    links: Array

},

并且 html 通过 av-for和template的链接循环：

<div class="navigationdrawer">

    <span @click="openNav" style="fontsize:30px;cursor:pointer;display:flex;justify-content:center;">&#9776;</span>

    <div id="mySidenav" class="sidenav">

        <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>

        <template v-for=v-for="(link, index) in links">

            <a v-bind:href="link.link"  :key="index">{{ link.title}}</a>

        </template>

    </div>

</div>