如何从VueJS中的组件获取数据

Question

我有以下组件:

零件

<template>
<div>
  <label class="typo__label">Single selecter</label>
  <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
</div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
    }
  }
}
</script>

我在我的页面中使用它是这样的:

<p id="app-two">
  <dropdown></dropdown>
  @{{ value }}
  @{{ message }}
</p>

<script>
    new Vue({
    el: '#app',
    data: {
        message: 'Test message'
    }
});
</script>

当我运行该页面时,@ {{message}}显示"测试消息",但@ {{value}}为空.我可以看到下拉组件的值在VueJS Dev Tools中更新,但它没有在页面上显示.如何访问vue元素中的组件数据？像@ {{dropdown.value}}这样的东西

Answer 1

<template>
    <div>
      <label class="typo__label">Single selecter</label>
      <multiselect v-model="internalValue" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value">  </multiselect>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect'

    export default {
      components: {
        Multiselect
      },
      props: ['value'],
      data () {
        return {
          internalValue: this.value,
          options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
        }
      },
      watch:{
         internalValue(v){
             this.$emit('input', v);
         }
      }
    }
</script>

并在您的页面中

<p id="app-two">
  <dropdown v-model="selectedValue"></dropdown>
  @{{ selectedValue}}
  @{{ message }}
</p>

<script>
    new Vue({
    el: '#app',
    data: {
        selectedValue: null
        message: 'Test message'
    }
});
</script>

这是一个示例，不使用多选，而是实现对v-model.