将变量传递给组件模板

Question

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

我们说我有模板：

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

我用

调用该组件

<component-input></component-input>

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

Answer 1

你可以这样做

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

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

您的问题的关键是使用props。希望能帮到你。

Answer 2

我明白了：

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

-

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

-

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