将变量传递给组件模板

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
    }
  }
});

Pass variable to component template