Question

在 Vue 中将数据从单个父组件传递到子组件

2019-02-19

376

javascript vue.js vuejs2

我有一个vue组件，即page.vue。我有一个card card的孩子vue组件。尝试在内部注入数据在页面组件的数据功能中。

page.vue

522039861

card.vue

0096344432 < < p>我希望该卡还可以从其他组件中重新使用。需要将数据注入到显示位置的卡中。

Answer 1

有两种方法可以向下传递数据。

第一种是通过使用 props 。

方法 1：

<template>
  <div class="container">
    <card :message="message"></card>
  </div>
</template>

<script>
import Card from "../Card.vue"
export default {
    name: 'skills',
    components: {
      "card": Card
    },
    data: function() {
        return {
            message: "Skills"
        }
    }
}
</script>

这将使数据在 Card.vue 中可用

<template>
  <div class="container drop-shadow">{{ message }}
  </div>
</template>

<script>
export default {
    name: 'card',
    props: ['message'],
    data: function() {
        return {
            data: "",
        }
    }
}
</script>

方法 2：您还可以在 Card.vue 中放置一个 slot ，这样您就可以将内容放在父元素的元素标签之间，就像这样。页面.vue

<template>
  <div class="container">
    <card>{{ message }}</card>
  </div>
</template>

<script>
import Card from "../Card.vue"
export default {
    name: 'skills',
    components: {
      "card": Card
    },
    data: function() {
        return {
            message: "Skills"
        }
    }
}
</script>

卡片.vue

<template>
  <div class="container drop-shadow">
    <slot />
  </div>
</template>

<script>
export default {
    name: 'card',
    data: function() {
        return {
            data: "",
        }
    }
}
</script>