Передача значений реквизита в компонент - PullRequest
Новая
       18

Передача значений реквизита в компонент

1 голос
/ 19 марта 2019

У меня есть этот компонент: InputField.vue 

<template>
  <div class="w-full">
    <label class="sr-only" :for="name"></label>
    <input
      :placeholder="label"
      :name="name"
      class="border-b border-black w-full appearance-none w-full py-4 px-3 text-grey-darker leading-tight"
    />
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      required: true,
      default: 'label', /* <--------- Always prints default */
    },
    name: {
      type: String,
      required: true,
      default: 'name', /* <--------- Always prints default */
    },
  },
  data() {
    return {}
  },
}
</script>

И вот как я использую его из другого компонента: 

<inputField :label="Hola" :name="nombre" />

Но label и name всегда являются значениями по умолчанию, определенными в объявлении компонента,

Есть идеи, что мне не хватает?

Ответы [ 2 ]

2 голосов
/ 19 марта 2019

Я собираюсь извлечь выгоду из фрагмента, сделанного Utlime, но в этом ответе много проблем, на самом деле вы НЕ ДОЛЖНЫ удалять «:», так как это то, что связывает его как подпорки и фактически позволяетнесколько экземпляров компонента имеют свои «собственные» состояния реквизита, просто назовите его как :aProp="'something'", если вы используете жестко закодированные значения, если вы передаете переменную, тогда идите с :aProp='variable' Правильный пример будет: 

Vue.component('InputField', {
  template: `
    <div class="w-full">
    <label class="sr-only" :for="name"></label>
    <input
      :placeholder="label"
      :name="name"
      class="border-b border-black w-full appearance-none w-full py-4 px-3 text-grey-darker leading-tight"
    />
  </div>
  `,

  props: {
    label: {
      type: String,
      required: true,
      default: 'label', /* <--------- No longer prints default if props are given */
    },
    name: {
      type: String,
      required: true,
      default: 'name',
    },
  },
});

new Vue({
  el: '#app',
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input-field :label="'Hola'" :name="'nombre'"></input-field>
  <input-field :label="'Que tal Toni'" :name="'toni'"></input-field>
</div>
1 голос
/ 19 марта 2019

Вам необходимо удалить :

<inputField label="Hola" name="nombre" />

Передача статического или динамического реквизита 

Vue.component('InputField', {
  template: `
    <div class="w-full">
    <label class="sr-only" :for="name"></label>
    <input
      :placeholder="label"
      :name="name"
      class="border-b border-black w-full appearance-none w-full py-4 px-3 text-grey-darker leading-tight"
    />
  </div>
  `,

  props: {
    label: {
      type: String,
      required: true,
      default: 'label', /* <--------- Always prints default */
    },
    name: {
      type: String,
      required: true,
      default: 'name', /* <--------- Always prints default */
    },
  },
});

new Vue({
  el: '#app',
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input-field label="Hola" name="nombre" /></input-field>
</div>
...