Question

我现在尝试将我的项目分成多个组件，以使代码在适应响应式应用程序时可读。问题是从基本选择->子项->父项传递df = df.replace({'True':2, 'False':1, 'null':0}) print (df) col1 col2 col3 0 2 2 1 1 2 2 2 2 0 0 2。如何将选择的数据存储到v-model Parent.vue？这是我的下面的代码。

Parent.vue

items: ''

Child.vue

<template>
  <child></child>
</template>

<script>
import Child from './components/Child'

export default {
  components: { 
    Child,
  },
  data: ()=> ({
    item: ''
  })
}
</script>

BaseSelect.vue

<template>
  // Random HTML
  // Random HTML 2
  <base-select 
  :items="select"
  >
</template>

<script>
import BaseSelect from '@/components/BaseSelect'

export default {
  components: { 
    BaseSelect,
  },
  data: ()=> ({
    select: ['Select 1', 'Select 2']
  })
}
</script>

Answer 1

您需要使用$ emit（documentation）将数据传递回父组件。或者，您可以开始使用Vuex（Vue.js的状态管理器）。

您还可以查看实时演示here。

Answer 2

要实现v-model，您需要向每个子组件添加一个value属性。每个组件还需要发出一个input事件，以便父组件可以获取更改（了解更多here）。请注意，如果要通过太多组件向下传递数据，则可能应该考虑使用Vuex，但是在这种情况下，仍然可以。

您的组件必须看起来像这样，才能将v模型一直传递到基本组件：

Parent.vue

<template>
  <!-- Pass the data item below -->
  <child v-model="item"></child>
</template>

<script>
import Child from './components/Child'

export default {
  components: { 
    Child,
  },
  data: ()=> ({
    item: ''
  })
}
</script>

Child.vue

<template>
  // Random HTML
  // Random HTML 2
  <base-select 
    :items="select"
    value="value"
    @input="e => $emit('input', e)"
  >
</template>

<script>
import BaseSelect from '@/components/BaseSelect'

export default {
  components: { 
    BaseSelect,
  },
  // We add the value prop below to work with v-model
  props: {
    value: String
  },
  data: ()=> ({
    select: ['Select 1', 'Select 2']
  }),
}
</script>

BaseSelect.vue

<template>
  <v-select
    v-bind="$attrs"
    v-on="$listeners"
    value="value"
    @input="e => $emit('input', e)"
    class="body-2"
    solo
    dense
    clearable
  />
</template>

<script>
export default {
  props: {
    value: String
  }
}
</script>

您可以找到我做过here的类似工作示例。

Vue-组件内组件内部的v模型

2 个答案: