Передача данных в vue из одного родительского компонента в дочерние компоненты

Question

У меня есть компонент vue, который является page.vue.И у меня есть дочерний компонент vue, который называется card.vue, как показано ниже.

Я не могу заставить его работать с добавлением данных в компонент карты (дочерний).

Я попытался ввестиданные внутри и в функции данных для компонента страницы.

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.Необходимо ввести данные в карту в соответствии с местом их отображения.

Answer 1

Существует два способа передачи данных.

Первый - это использование реквизита .

МЕТОД 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: Вы также можете поместить slot в Card.vue, который позволит вам размещать контент междутеги элемента на родительском элементе выглядят так.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>