将数据传递给单个文件 Vue 组件答案

【问题标题】：Passing data to single file Vue component将数据传递给单个文件 Vue 组件
【发布时间】：2018-08-29 20:06:00
【问题描述】：

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

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>

【问题讨论】：

使用命名槽vuejs.org/v2/guide/components.html#Named-Slots

标签： javascript vue.js components single-page-application

【解决方案1】：

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

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

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

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

【讨论】：