将 props 值传递给组件答案

【问题标题】：Passing props values to component将 props 值传递给组件
【发布时间】：2019-08-09 18:49:41
【问题描述】：

我有这个组件：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 始终是组件声明中定义的默认值，

知道我错过了什么吗？

【问题讨论】：

嗨，托尼，看看我的回答，希望够清楚，你几乎没看错，只是语法而已。

标签： vue.js properties components

【解决方案1】：

我将利用 Utlime 完成的 sn-p 但该答案存在很多问题，实际上您不能取出“：”，因为它是将其绑定为道具的东西，实际上将让组件的多个实例拥有它们“自己的”道具状态，如果您使用硬编码值，只需将其称为 :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>

【讨论】：

【解决方案2】：

你需要删除:

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

Passing Static or Dynamic Props

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>

【讨论】：

是的，我需要删除 : 如果我传递的是静态值，谢谢！