VueJS如何从组件中获取数据 [英] How to get data from a component in VueJS

问题描述

我有以下组件:

组件

<模板>
<label class="typo__label">单选器</label><multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="选择一个值"></多选></div></模板><脚本>从'vue-multiselect'导入多选导出默认{组件: {多选},数据 () {返回 {价值: ''，options: ['Select option', 'options', 'selected', 'multiple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange'，'感动']}}}</脚本>

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

<p id="app-two"><下拉></下拉>@{{ 价值 }}@{{ 信息 }}</p><脚本>新的 Vue({埃尔:'#app'，数据: {消息:'测试消息'}});</脚本>

当我运行页面时，@{{ message }} 显示测试消息"，但 @{{ value }} 为空白.我可以看到下拉组件的值在 VueJS 开发工具中得到更新，但它没有显示在页面上.如何访问我的 vue 元素中的组件数据?类似@{{ dropdown.value }}

解决方案

<template>
<label class="typo__label">单选器</label><multiselect v-model="internalValue" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="选择一个值"></多选></div></模板><脚本>从'vue-multiselect'导入多选导出默认 {组件: {多选},道具:['价值']，数据 () {返回 {内部值:this.value，options: ['Select option', 'options', 'selected', 'multiple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange'，'感动']}},手表:{内部值(v){this.$emit('输入', v);}}}</脚本>

在你的页面中

<p id="app-two"><dropdown v-model="selectedValue"></dropdown>@{{ selectedValue}}@{{ 信息 }}</p><脚本>新的 Vue({埃尔:'#app'，数据: {选定值:空消息:'测试消息'}});</脚本>

这里是一个例子，不是使用多选，而是一个实现对 v-model 支持的自定义组件.

I have the following component:

Component

<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>

I am using it in my page like so:

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

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

When I run the page, @{{ message }} shows "test message" but @{{ value }} is blank. I can see the value of the dropdown component getting updated in VueJS Dev Tools but it does not show on the page. How do I access the components data in my vue element? Something like @{{ dropdown.value }}

解决方案

<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>

and in your page

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

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

Here is an example, not using multi-select, but a custom component that implements support for v-model.

这篇关于VueJS如何从组件中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！