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

时间:2019-02-19 06:12:18

标签: javascript vue.js vuejs2

我有一个vue组件,即page.vue。 而且我有一个子vue组件,即card.vue,如下所示。

我无法将其注入到card(child)组件中。

我试图在内部注入数据 在页面组件的数据功能中。

Page.vue

<template>
  <div class="container">
    <card></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">
  </div>
</template>

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

我希望该卡可以从Page.vue之外的其他组件中重复使用。 需要将数据分别插入显示位置的卡中。

1 个答案:

答案 0 :(得分:3)

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

第一个是通过使用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,这样可以将内容放在父元素的元素标签之间。 Page.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>

Card.vue

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

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