Vue.js 我可以将道具传递给子组件并在Vue中使用父组件中的数据吗

我希望将数据传递给子组件，并在父组件中呈现相同的数据。此外，我希望在函数中使用数据，而不是简单地在子函数中呈现数据。当我传递本例中的道具时，它不再使用数据呈现标记

 <template>
  <div class="hello">
    <div v-for="(section, index) in sections" :key="index">
      <p>{{section.name}}</p>
      <p>{{section.type}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      sections: [
        {
          name: "scoop",
          type: "boulder"
        },
        {
          name: "pew pew",
          type: "roped"
        }
      ]
    };
  },
  props: ["sections"]
};
</script>

---

在您的案例中，数据和道具不能使用相同的单词/属性名称部分。

我假设您的代码是父组件：

//parent.vue {{section.name}}

{{section.type}

从“~/components/MyChildComponent.vue”导入MyChildComponent 导出默认值{ 名称：HelloWorld， 组成部分：{ MyChildComponent }, 资料{ 返回{ 章节：[ { 名称：独家新闻， 类型：漂石 }, { 姓名：pew pew， 类型：绳索 } ] } }, 方法：{ 安慰{ console.logthis.sections//在函数中使用数据的方法 } } } //MyChildComponent.vue {{section.name}}

{{section.type}

导出默认值{ 名称：儿童地狱世界， 道具：[“部分”]， 方法：{ 安慰{ console.logthis.sections//child中使用数据的方法 } } } 查看vue指南中有关组件的内容：