如何在 vue.js 中的组件之间共享数据

Question

我有一个具体的问题。 我只想共享一个变量，其中包含从组件 1 到组件 2 的主数组的 de 数组长度。该变量显示在页面挂载时在方法中计算，所以我使用 mount() 来调用方法函数。 这部分没问题，所以我必须将此变量发送给子组件，以便它可以在标签上使用。

解释一下：我确实有一个组件，我们将它命名为“progressBar”，它的代码很简单，就像在 bootstrap-vue 上一样：

<template>
    <div id="main-progress">
      <div class="progress-wrapper">
        <b-progress
          v-model="value"
          max="100"
        />
      </div>
    </div>
</template>

<script>
import { BProgress } from 'bootstrap-vue'

export default ({
    components: {
        BProgress,
    },

    data(){
        return {
            value: 0,
        }
    }
})
</script>

然后我在组件 1 上有一个名为“trailCard”的主数组

data(){
return{
trail_card: [
        {
          title: 'Card 1',
          description: 'Before you get into the nitty-gritty of coming up with a perfect title, start with a rough draft: your working title. What is that, exactly? A lot of people confuse working titles with topics. A lot of people confuse working titles with topics. A lot of people confuse working titles with topics. A lot of people confuse working titles with topics.',
          video: 'https://lp.planodevida.com/lps/o-que-e-etf/videos/o-que-e-etf_video_intro.mp4',
          video_thumb: require('@/assets/images/banner/jornada-thumb.png'),
          activeLike: false,
          activeFavorite: false,
          enable: true,
          completed: false,
          social: {
            like: 10,
            comments: 10,
            favorite: 10,
          },
          author:{
            avatar: '',
            name: 'Fulano de tal',
            slug: 'perfil-do-autor',
          },
        },
        {
          title: 'Card 2',
          description: 'Before you get into the nitty-gritty of coming up with a perfect title, start with a rough draft: your working title. What is that, exactly? A lot of people confuse working titles with topics. A lot of people confuse working titles with topics. A lot of people confuse working titles with topics. A lot of people confuse working titles with topics.',
          video: 'https://lp.planodevida.com/lps/o-que-e-etf/videos/o-que-e-etf_video_intro.mp4',
          video_thumb: require('@/assets/images/banner/jornada-thumb.png'),
          activeLike: false,
          activeFavorite: false,
          enable: true,
          completed: false,
          social: {
            like: 10,
            comments: 10,
            favorite: 10,
          },
          author:{
            avatar: '',
            name: 'Fulano de tal',
            slug: 'perfil-do-autor',
          },
        },
]
      arrayLength: 0,
}
}

我正在使用以下方法计算数组长度：function() return arrayLength = this.trail_card.length 主要问题： 如何将此变量从 trailCard（组件 1）发送到 progressBar（组件 2）以在组件 2 上的方法或任何我需要的方法上使用它

Answer 1

不确定你是如何设置的，但是使用计算属性作为卡片数组长度，然后你可以在数据发生变化时发出数据，你可以将它作为道具传递给进度条，个人 id 也传递卡片作为道具。

<template>

</template>
<script>
export default {
    data(){
        return {
            trail_card: [],
        };
    },
    watch: {
        trail_card(val) {
            this.$emit('cardAdded', this.cards);
        }
    },
    computed: {
        cards() {
            return this.trail_card.length;
        },
    },
}
</script>

<template>
    <progress-bar :cards="cards"></progress-bar>
    <trail-card @cardAdded="updateCards"></trail-card>
</template>
<script>
export default {
    data() {
        return {
            cards: 0,
        };
    },
    methods: {
        updateCards(val) {
            this.cards = val;
        }
    },
}
</script>