Question

我无法将数据传递给道具。基本上，我想在每个页面上重新呈现此组件，但组件内的内容应该不同。喜欢链接，技术，反馈。所以我试图找到一种方法将信息传递给组件，它将显示它，而不必删除组件，只需在单个页面上写入。我已经查看了问题，但似乎没有一种方法可行。也许我想要做的事情是不可能的？

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

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

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

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

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

将数据传递到单个文件Vue组件

1 个答案: