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

问题描述

我有以下组件：

组件

 < template> 
< div> 
< label class = typo__label>单个选择器< / label> 
< multiselect v-model = value：options = options：searchable = false：close-on-select = false：show-labels = false placeholder =选择值< / multiselect> 
< / div> 
< / template> 
 
< script> 
从 vue-multiselect中导入多选
 
导出默认值{
组件：{
 Multiselect 
}，
 data（）{
 return {
 value：''，
选项：['选择选项'，'选项'，'选定'，'多'，'标签'，'可搜索'，'clearOnSelect'， 'hideSelected'，'maxHeight'，'allowEmpty'，'showLabels'，'onChange'，'touched'] 
} 
} 
} 
< / script> 
  

我在页面中使用它的方式如下：

 < p id = app-two> 
< dropdown>< / dropdown> 
 @ {{值}} 
 @ {{消息}} 
< / p> 
 
< script> 
新Vue（{
 el：＃app，
数据：{
消息：测试消息 
} 
}）； 
< / script> 
  

当我运行页面时，@ {{message}}显示 test message，但是@ {{值}}为空白。
我可以在VueJS Dev Tools中看到下拉组件的值正在更新，但是它没有显示在页面上。如何访问vue元素中的组件数据？像@ {{dropdown.value}}

解决方案

 < template> 
< div> 
< label class = typo__label>单个选择器< / label> 
< multiselect v-model = internalValue：options = options：searchable = false：close-on-select = false：show-labels = false placeholder = Pick a value > < / multiselect> 
< / div> 
< / template> 
 
< script> 
从 vue-multiselect中导入多选
 
导出默认值{
组件：{
 Multiselect 
}，
道具：['值']，
 data（）{
 return {
 internalValue：this.value，
选项：['Select option'，'options'，'selected'，'mulitple' ，标签，可搜索， clearOnSelect， hideSelected， maxHeight， allowEmpty， showLabels， onChange， touched] 
} 
}，
手表：{
 internalValue（v）{
 this。$ emit（'input'，v）; 
} 
} 
} 
< / script> 
  

并在您的页面中

 < p id = app-two> 
< dropdown v-model = selectedValue>< / dropdown> 
 @ {{selectedValue}} 
 @ {{message}} 
< / p> 
 
< script> 
新Vue（{
 el：'#app'，
数据：{
 selectedValue：空
消息：'测试消息'
} 
}）; 
< / script> 
  

这是一个示例，未使用多选，而是一个自定义组件，实现了对 v模型的支持。 / p>

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