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

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

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

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

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

javascript vue.js vuejs2

19.02.2019 07:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

130

Ответы 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: Вы также можете поместить слот в Card.vue, что позволит вам поместить контент между тегами элемента на родительском элементе, например. Страница.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>

Спасибо. Я заставил его работать. Но я не могу заставить его работать с передачей объекта. Что мне не хватает?

— 20.02.2019 07:09

Вы должны быть более конкретными

— 20.02.2019 16:06

Я не уверен, что вы подразумеваете под передачей объекта. Вы имеете в виду настоящую javascript Object? Почему вы передаете объект?

— 20.02.2019 18:13

19.02.2019 07:31