0

我想将数据传递给子组件并在父组件中呈现相同的数据。此外，我想在函数中使用数据，而不是简单地将其呈现在子进程中。当我在这个例子中传递道具时，它不再呈现

带有数据的标签

 <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>
4

2 回答 2

1

您不能对数据和道具使用相同的单词/属性名称（在您的情况下为部分）。

于 2019-08-28T16:23:37.743 回答
0

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

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

<script>
import MyChildComponent from '~/components/MyChildComponent.vue'

export default {
  name: "HelloWorld",
  components: {
    MyChildComponent
  },
  data() {
    return {
      sections: [
        {
          name: "scoop",
          type: "boulder"
        },
        {
          name: "pew pew",
          type: "roped"
        }
      ]
    }
  },
  methods: {
    consoleSections() {
      console.log(this.sections) // the way to use data in function
    }
  }
}
</script>

// MyChildComponent.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: "ChildHelloWorld",
  props: ['sections'],
  methods: {
    consoleSections() {
      console.log(this.sections) // the way to use data in child
    }
  }
}
</script>

查看关于组件的 vue 指南：  https ://vuejs.org/v2/guide/components.html

于 2019-08-28T16:28:10.087 回答