javascript - 将数据传递给单个文件 Vue 组件

Question

我无法将我的数据传递给 Prop 。基本上，我想在每个页面上重新呈现这个组件，但组件内的内容应该不同。喜欢链接、技术、反馈。因此，我试图找到一种方法，以一种无需删除组件并将其写在各个页面上即可显示的方式将该信息传递给组件。我已经查看了问题，但似乎没有一种方法有效。也许我正在尝试做的事情是不可能的？

component.vue

<template>
<el-collapse v-model="activeName" @change="handleChange" accordion>
    <el-collapse-item title="Links" v-model="links">
        <center>{{ this.links }}</center>
        </el-collapse-item>
        <el-collapse-item title="Tech" name="2" prop-name="techlist" v-model="techlist">
            <div v-for="o in this.techlist" :key="o" class="text item" >
                {{ o }}
            </div>
        </el-collapse-item>
        <el-collapse-item title="Feedback" name="3" v-model="feedback">
            {{ this.feedback }}
        </el-collapse-item>
    </el-collapse>
</template>


<script>
export default {
    props: ['links', 'techlist', 'feedback']
}
</script>

page.vue

<template>
    <div>
        <el-row class="bg-row" type="flex" justify="end">
            <el-col span="6">
                <v-menu>
                </v-menu>   
            </el-col>
        </el-row>
    </div>           
</template>

<script>
import Menu from 'components/Menu'

export default {
  name: 'page2',
     data() {
      return {
          techlist: ["tech1", "tech2","tech3"],
          links: "<center><a href='page1'>Github</a><br><a href='page2'>heroku</a></center>",
          feedback: '<div>Basically just a placehold for feature I will add to the site later on.</div>'
        }
    },
    components: {
        'v-menu': Menu
    },
}
</script>

Answer 1

您在组件本身上正确定义了您的 Prop ，但您没有将它们从父级绑定(bind)或传递给组件。在父级中，您需要像这样添加它们。

<v-menu :links="links" :techlist="techlist" :feedback="feedback"></v-menu>

:links 部分将是您在 props:['links'] ="links" 部分中使用的名称是父项中定义的数据属性、方法或计算属性的名称。所以你可以做类似 :links="getLinks()" 的事情，这是一个返回所有链接的方法。

https://v2.vuejs.org/v2/guide/components.html#Props