Question

我想编写一个可重复使用的Vue标签组件（我知道那里有很多，但是为了挑战，我正在这样做）。

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

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

基于这个原因，我走了下来，观察其他Vue标签库如何解决此问题（bootstrap vue，vue tabs等），但是我发现的全部是他们使用{{ 1}}或this.$parent访问子属性。而且我知道这不是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“商店”中存储的任何数据。如果您将组件设置为正确导入vuex存储，它还将提供对任何其他引用该存储的组件的反应性绑定，这意味着您不再担心会遇到多个组件之间复杂的属性传递。而是每个组件都引用根存储数据。（希望如此。）

这是一个非常高级的概述，但是如果听起来对您的项目有帮助，则应该真正查看一下Official Documentation，这太棒了！

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

2 个答案: