如何将我的数据存储在自定义 Vue 组件而不是根 Vue 实例中？答案

【问题标题】：How do I store my data in a custom Vue component instead of the root Vue instance?如何将我的数据存储在自定义 Vue 组件而不是根 Vue 实例中？
【发布时间】：2019-10-15 11:48:57
【问题描述】：

我在 Vue 中创建了一个自定义复选框组件，它可以很好地处理存储在根实例中的数据。我计划在各种情况下重用这个组件（以及我正在构建的许多其他组件）。我不想每次使用组件时都必须更新或编辑根 Vue 实例，并且只想将数据存储在组件本身中。已选中/未选中的布尔值需要是响应式的。

我尝试过使用计算值，但也无法让它工作。如果需要，我愿意使用它。

（此版本无效）

<body>
  <script src="https://unpkg.com/vue@2.6.10"></script>
  <div id="app">
    <checkbox-item v-model="checkData">Active</checkbox-item>
    {{ checkData }}
  </div>
</body>

</html>

<script>
  Vue.component('checkbox-item', {
    template: `
          <label class="checkbox-item">
            <input type="checkbox" :checked="value"
                   @change="$emit('input', $event.target.checked)"
                   class="checkbox-input">
            <span class="checkbox-label">
              <slot></slot>
            </span>
          </label>
        `,
    data: function() {
      return {
        checkData: null
      }
    },
    props: ['value']
  })
  new Vue({
    el: '#app',
  })
</script>

（此版本有效，但我再次需要数据不在根实例中）

<body>
  <script src="https://unpkg.com/vue@2.6.10"></script>
  <div id="app">
    <checkbox-item v-model="checkData">Active</checkbox-item>
    {{ checkData }}
  </div>
</body>

<script>
  Vue.component('checkbox-item', {
    template: `
          <label class="checkbox-item">
            <input type="checkbox" :checked="value"
                   @change="$emit('input', $event.target.checked)"
                   class="checkbox-input">
            <span class="checkbox-label">
              <slot></slot>
            </span>
          </label>
        `,
    props: ['value']
  })
  new Vue({
    el: '#app',
    data: {
      checkData: null
    }
  })
</script>

我得到的错误是：

[Vue 警告]：属性或方法“checkData”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

并且checkData 不像在工作示例中那样具有反应性。

编辑：好的，这就是有效的！我肯定会考虑使用 SFC 和其他代码组织方法，但现在它仍然在一个 html 文件中。有没有人认为这从长远来看是行不通的？

  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <checkbox-item></checkbox-item>
    </div>
  </body>
</html>

<script>
  Vue.component('checkbox-item', {
    template: `
      <label class="checkbox-item">
        <input type="checkbox" v-model="checkData"
               class="checkbox-input">
        <span class="checkbox-label">
          <slot>Active: {{checkData}}</slot>
        </span>
      </label>
    `,
    data: function(){
      return {
        checkData: this.checked
      }
    },
  })
  new Vue({
    el: '#app',
  })
</script>

【问题讨论】：

我强烈建议看看 VueMastery 的介绍和高级组件课程。了解 v-on="$listeners" 和 v-bind="$attrs" 会对你有很大帮助。他们还深入探讨了使用槽和作用域槽的组合。最后，VueLand Discord 是获得帮助的绝佳免费资源。

标签： vue.js vuejs2 vue-component

【解决方案1】：

第一个示例不起作用的原因是您的根 Vue 组件无权访问复选框的数据。

<html>
<!-- Your existing nonfunctional example -->
<body>
  <script src="https://unpkg.com/vue@2.6.10"></script>
  <div id="app">
    <!-- Both v-model and {{ checkData }}
      are asking about the root vue's checkData,
      but you took that off. This is why you have an error -->
    <checkbox-item v-model="checkData">Active</checkbox-item>
    {{ checkData }}
  </div>
</body>

</html>

非功能示例中发生了什么？

当您在非功能示例中说 v-model="checkData" 时，它告诉父（根）Vue 组件在其本地范围内查找 checkData 以及 v-bind:value="checkData" 和 v-on:input="checkData = $event.target.value"

使您的复选框项目可重复使用

您的组件可以按原样重复使用。

我对您的checkbox-item 所做的唯一更改是在input 元素上传递v-on="$listeners" 和v-bind="$attrs"，并删除道具中显式的“值”。

对于任何低级、可重用的 UI 组件，您都需要输入和输出数据。使用 v-model 并将数据存储在父组件中实际上是您想要做的。将数据存储在根组件中感觉很笨拙，因此通常会有中级组件。

为了证明这一点，我列出了可以高兴或悲伤的书呆子，并使用您的复选框来更新他们的状态。

在 Root Vue 组件中的使用

<body>
  <script src="https://unpkg.com/vue@2.6.10"></script>
  <div id="app">
    <!-- If you wanted to take in data,
        you would pass in the nerds array as a Prop
        into nerd-list _from_ the root Vue instance -->
    <nerd-list/> 
  </div>
</body>

<script>
  Vue.component('nerd-list', {
   template: '<div>
     <h1>List of nerds and if they are happy</h1>
     <div v-for="nerd in nerds" :key="nerd.id">
       {{ nerd.name }}
       <checkbox-item v-model="nerd.happy">Happy</checkbox-item>
     </div>
   </div>',
  data() {
    return {
      nerds: [
        { name: 'Jess', happy: true, id: 1 },
        { name: 'Tiffany', happy: true, id: 2 },
      ]
    };
  },
});

  Vue.component('checkbox-item', {
    template: `
          <label class="checkbox-item">
            <input type="checkbox" :checked="value"
                   @change="$emit('input', $event.target.checked)"
                   class="checkbox-input">
            <span class="checkbox-label">
              <slot></slot>
            </span>
          </label>
        `,
    props: ['value']
  })
  new Vue({
    el: '#app',
    data: {}, // any data in here could be used to pass props into the nerd-list.
  })
</script>

最后，如您所知，将所有这些都写在 Javascript 文件中可能看起来有点麻烦。我强烈推荐使用 Vue CLI 和 Vue SFC 组件以获得更好的体验。

【讨论】：

非常感谢您的详细回复和有趣的例子！ ;-)
没问题@TiffanyDevlin-Drye！如果答案正确，请务必接受。