将变量传递给组件模板答案

【问题标题】：Pass variable to component template将变量传递给组件模板
【发布时间】：2016-03-23 04:05:46
【问题描述】：

我正在尝试创建一个包含某些输入字段的 Vue.js 组件。这意味着组件模板必须接受输入的名称。

假设我有模板：

<template>
  <input type="text" name="VARIABLE">
</template>

我用

调用那个组件

<component-input></component-input>

我的组件输入如何定义 VARIABLE 的值？

【问题讨论】：

标签： vue.js

【解决方案1】：

你可以这样做

Vue.component('input-component', {
  template: '<input type="text" :name="inputName">',
  props: {
   inputName: String   
  }
})

&lt;input-component input-name="someName"&gt;&lt;/input-component&gt;

您的问题的重点是使用props。希望能帮到你。

【讨论】：

【解决方案2】：

我明白了：

<template>
  <input type="text" name="{{name}}">
</template>

<component-input name="demo"></component-input>

var component = Vue.extend({
  props: {
    name: {
      type: String
    }
  }
});

【讨论】：