Vue.js 基于主Vue实例中的属性值切换组件

我正在设计一个页面，使用一个酒店组件返回一组不同的酒店。每个酒店都会向组件传递唯一的值，例如名称、星级、酒店设施等

在Vue实例的主页上，我需要一些基本的过滤器，根据每个组件自身的属性值来切换每个组件的真/假。我不知道如何将hotel组件中的prop值拉到主Vue实例中并在其上运行方法

由于这是一个小应用程序，我使用CDN是为了方便使用

下面是组件示例

<hotels
hoteltitle="Ryans"
hoteldesc="This hotel is situated on the popular waterfront with sweeping views 
overlooking the marina."
loc="Ibiza"
star="4"
beachfront="true"
family="false"
gym="true"
pool="true"
single="true"
spa ="false"
hotelurl="/url.html"
price="74"
url="index2.html"
accomCode="30030"
></hotels>

---

如果要将数据从子组件发射到父组件，可以使用

$emit

功能。检查

---

检查此代码笔

我认为您不应该将某些内容从子组件拉到父组件。“所有道具在子属性和父属性之间形成单向向下绑定：当父属性更新时，它将向下流到子属性，但不会反向。”。也许考虑使用事件总线。你能显示你的父组件代码吗？@ SUIDIDRAM，它是相当空的！马特，也许，这就是问题所在。可以将酒店存储在父组件的阵列中，在计算属性中过滤阵列，并使用过滤阵列在循环中渲染子对象。