Question

我对Vue并不陌生，我想为v-select提供一个可重用的组件（使用vuetify）。现在的问题是我不知道如何将v-model和@events传递给组件。这是我的下面的代码。

Template.vue

      <base-select 
           v-model="rows.corporate_objective_id"
           :items="corporate_objectives" 
           :item-text="corporate_objective" 
           :item-value="id" 
           placeholder="Please select a Corporate Objective"
           @change='corporateObjectiveDescription(); departmentObjectives()'
         />

v选择组件

    <template>
      <v-select
        :value="value" 
        @input="$emit('input', $event.target.value)"
        :items="items" 
        :item-text="item-text" 
        :item-value="item-value" 
        dense
        clearable
      />
    </template>

    <script>
     export default {
        name: 'BaseSelect',
        props: ['value', 'items', 'item-text', 'item-value'],
        data: () => ({
        })
      }
    </script>

Answer 1

您可以将所有属性和侦听器传递给编写以下内容的子组件：

<template>
  <v-select
    v-bind="$attrs"
    v-on="$listeners"
    dense
    clearable
  />
</template>

<script>
 export default {
    name: 'BaseSelect',
    data: () => ({
    })
  }
</script>

您可以从21:50看this video。它很好地解释了如何制作“透明包装纸”

Vue-从组件检索事件和v模型

1 个答案: