如何在不使用道具的情况下将数据从父组件传递到子组件

Question

我想编写一个可重用的 Vue 选项卡组件（我知道那里有很多，但我这样做是为了挑战）。

我现在面临的问题是在不使用道具的情况下将数据传递给孩子。

原因很简单，我需要子标签元素知道当前选择的标签索引，我不希望使用我的组件的用户总是需要为每个标签组件输入道具。

出于这个原因，我去观察其他 Vue 选项卡库是如何解决这个问题的（bootstrap vue、vue tabs 等），但我发现它们使用 this.$parent 或 @987654324 访问父属性@ 访问子属性。而且我知道这不是 Vue 的方式。

我研究了注入和提供，它很棒，但它不是被动的。

我也不想使用 Vuex，因为我的项目太小了，我希望我的组件可以重用。

有更好的方法吗？

Answer 1

一个简单的解决方案是在不使用 Vuex 的情况下创建自己的商店：

class TabStore {
  constructor() {
    this.state = {
      currentIndex: 1
    }
  }
  setIndex(value) {
    this.state.currentIndex = value
  }
}
let tabStore = new TabStore()

Vue.component('tab-item', {
  template: '#tab',
  data() {
    return { state: tabStore.state }
  }
})

new Vue({
  el: "#app",
  data() {
    return { state: tabStore.state }
  },
  methods: {
    changeIndex() {
      let index = Math.floor((Math.random() * 10) + 1) //<-- for the example
      tabStore.setIndex(index)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <p>Current Index from Main component: <strong>{{ state.currentIndex }}</strong></p>
  <tab-item></tab-item>
  <button @click="changeIndex">Change current index</button>
</div>

<template id="tab">
 <p>Current Index from Tab component: <strong>{{ state.currentIndex }}</strong></p>
</template>

您可以使用商店中的setIndex() 更改state.currentIndex，并且您可以在任何地方访问这个。

Answer 2

我相信你可能会对学习 Vuex 感兴趣。
简单来说，Vuex 充当 Vue 应用程序中数据的“单一事实来源”。
这意味着存储在 vuex 'store' 中的任何数据都可以被应用程序中的任何组件访问。如果您将组件设置为正确导入您的 vuex 存储，它还提供对引用该存储的任何其他组件的反应式绑定，这意味着您不再担心通过多个组件进行复杂的属性传递。相反，每个组件都引用根存储数据。 （希望这是有道理的。）

这是一个非常高级的概述，但如果它听起来对你的项目有帮助，你真的应该看看Official Documentation，这很棒！