Мне нужно передать данные от компонента к другому?

Question

У меня есть два компонента (компонент новостей и компонент новостей-подробностей, мне нужно перенести заголовок, описание и изображение из новостей на подробную страницу, какая-нибудь идея?

**News Component**
<template>
    <div class="container mt-5 mb-5">

    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center mb-3">Our News</h2>
        </div>
        <div class="col-md-4 text-center" v-for="newss in news">
            <img :src="newss.imgSrc" class="img-fluid"  style="width: 300px; height: 300px;">
            <h2>{{newss.title}}</h2>
            <p>{{newss.paragraph}}</p>
            <router-link to="/news-details">
                <button class="btn btn-success"  >Read More</button>
            </router-link>
        </div>
    </div>
    </div>
</template>


<script>
    export default {
        data : function () {
            return{
                news:[
                    {
                        title : 'News One',
                        paragraph : 'News Description One',
                        imgSrc: 'https://www.gstatic.com/webp/gallery/1.jpg'
                    },
                    {
                        title : 'News Two',
                        paragraph : 'News Description Two',
                        imgSrc: 'https://www.gstatic.com/webp/gallery/2.jpg'
                    },
                    {
                        title : 'News Three',
                        paragraph : 'News Description Three',
                        imgSrc: 'https://www.gstatic.com/webp/gallery/3.jpg'
                    }

                ]
            }
        },

     }
</script>


**News Details Component**
<template>
    <div class="container mt-5 mb-5">

        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center mb-3">News Details</h2>
            </div>
            <div class="col-md-4 text-center">
                <img :src="imgSrc" class="img-fluid"  style="width: 300px; height: 300px;">
                <h2>{{title}}</h2>
                <p>{{paragraph}}</p>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        props: {
            title : String,
            paragraph: String,
            imgSrc: String
        }

    }
</script>

У меня есть два компонента (компонент News и компонент News-Details, мне нужно перенести заголовок, описание и изображение из новостей на подробную страницу, любая идея?

Answer 1

Существует несколько способов передачи контента через компоненты.

Во-первых с помощью $ emit () вы можете перехватить изменение в родительском компоненте и передать его с помощью prop в другой дочерний компонент.

methods:{
 changeHandler: function(){
  this.$emit('info', {title, image,description})
 }
}

в вашем дочернем компоненте сделайте то же самое, в ваших родителях сделайте следующее

<news @info="info"></news>
<news-detail info="info"></news-detail>

Вы не указали структуру компонентов и иерархии, поэтому я не знаю, сработает ли это для вас.

Во-вторых, через vuex

вы можете commit() значения и получить к нему доступ через getters[]

в-третьих, через шину событий, аналогичную первой, но с центральным управлением.