将数据从 Vuejs 组件传输到另一个 div答案

【问题标题】：Transfer data from Vuejs component to another div将数据从 Vuejs 组件传输到另一个 div
【发布时间】：2021-12-30 06:32:33
【问题描述】：

是否可以传输一些数据？

在我的 vue 组件（子）中，我有：

{{ checked.length }}

对所选项目的数量负责。

但我需要在另一个 div(parent vue) 中显示该信息，它不在视图组件中。

更新：子组件

<template>
<ul class='filter-content__list' v-if='toggle'>
 {{ checked.length }}
<li v-for='item in itemsData' :key='item.id'>
  <label class='custom-checkbox'>
    <input type='checkbox' :value='item.title' v-model='checked'>
    <span>{{ item.title }}</span>
  </label>
 </li>
</ul>
</template>

<script>

export default ({
 props: ['toggle', 'itemsData'],
 data() {
  return {
   checked: []
   };
  }
 });

【问题讨论】：

发出事件和监听事件。
已经尝试过了，但对我不起作用。我想是因为我有 3-4 个列表（列表 = 子组件）。或者我做错了什么
this.$root.$emit('checkedItems', checked.length) 比 this.$root.$listen('checkedItems', (payload) => {})
请不要粘贴代码图片。粘贴实际代码。

标签： vue.js vue-component

【解决方案1】：

您可以在组件之间传递值作为属性检查documentation。

注意：

只有单向绑定，即：

所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，而不是相反。

【讨论】：