Javascript Vue.js导入对象

我在将对象从App.vue文件导入组件时遇到问题。但首先我应该解释一下这个项目的目的。 有一个组件（导航抽屉）和一个App.vue文件。导航抽屉中有vue道具，您可以在App.vue文件中动态更改这些道具。问题是，我只能使用导航抽屉文件中的链接数

我想编辑它，这样我就可以根据需要使用任意多的链接，甚至不必打开Navigation-Drawer.vue文件。在我深入了解更多细节之前，以下是带有道具的文件和数量有限的链接：

App.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>

<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
 },

 methods: {
     openNav() {
         document.getElementById('mySidenav').style.width = '15%'
         },

    closeNav() {
        document.getElementById('mySidenav').style.width = '0%'
        }
    }
 }

</script>

从“./components/HelloWorld.vue”导入HelloWorld
从“./components/Navigation Drawer.vue”导入NavigationDrawer
导出默认值{
名称：“应用程序”，
组成部分：{
HelloWorld，
导航抽屉
}
}

导航抽屉.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>

<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
 },

 methods: {
     openNav() {
         document.getElementById('mySidenav').style.width = '15%'
         },

    closeNav() {
        document.getElementById('mySidenav').style.width = '0%'
        }
    }
 }

</script>

☰
导出默认值{
名称：“导航抽屉”，
道具：{
名称1：字符串，
名称2：字符串，
名称3：字符串，
名称4：字符串，
链接1：字符串，
链接2：字符串，
链接3：字符串，
链接4：字符串
},
方法：{
openNav（）{
document.getElementById（'mySidenav'）。style.width='15%'
},
closeNav（）{
document.getElementById（'mySidenav'）。style.width='0%'
}
}
}

现在，我想到的是创建一个js对象，它可以将App.vue中的链接导入抽屉。大概是这样的：

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

---

你已经非常接近答案了。将
=
更改为
：
，值将被
'
包围，而不是
“
，这样您就有了一个对象列表

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

html通过带有
v-for
的链接循环，并且：


☰