从 Vue.js 指令返回变量

Posted 2023-02-22

【中文标题】从 Vue.js 指令返回变量

【英文标题】：Returning variables from a Vue.js directive

【发布时间】：2019-09-16 19:21:25

【问题描述】：

Vue.js 有一个名为 v-for 的内置指令，用于对列表进行读写。

html 代码

<ul id="example-1">
  <li v-for="item in items">
     item.message 
  </li>
</ul>

脚本代码

var example1 = new Vue(
  el: '#example-1',
  data: 
    items: [
       message: 'Foo' ,
       message: 'Bar' 
    ]
  
)

在这里，通过使用v-for 指令，items 数组中的元素将作为名为@9​​87654328@ 的变量返回。在这里，v-for 指令返回的变量可以在 html DOM 中使用。如何创建这样一个自定义指令，将变量返回给 html DOM？

注意：我确实在vuejs的source code中搜索了v-for指令源代码，但是没有找到。请帮我解决这个问题，因为我对 vuejs 很陌生。谢谢你。

编辑：

我目前拥有什么？

有 3 个相似的输入组分别用于输入“名字”、“姓氏”和“地址”。每个输入字段都有label、state、disabled、value 和max 属性，这些属性存储在inputOptions 数组中。

<!-- HMTL -->
<b-input-group :prepend="inputOptions.firstName.label">
    <b-form-input 
        :state="inputOptions.firstName.state" 
        v-model="inputOptions.firstName.value" 
        :disabled="inputOptions.firstName.disabled" 
        :maxlength="inputOptions.firstName.max"
        ></b-form-input>
</b-input-group>

<b-input-group :prepend="inputOptions.lastName.label">
    <b-form-input 
        :state="inputOptions.lastName.state" 
        v-model="inputOptions.lastName.value" 
        :disabled="inputOptions.lastName.disabled" 
        :maxlength="inputOptions.lastName.max"
        ></b-form-input>
</b-input-group>

<b-input-group :prepend="inputOptions.address.label">
    <b-form-input 
        :state="inputOptions.address.state" 
        v-model="inputOptions.address.value" 
        :disabled="inputOptions.address.disabled" 
        :maxlength="inputOptions.address.max"
        ></b-form-input>
</b-input-group>

//脚本

inputOptions: 
            firstName: 
                label: 'First Name',
                state: true,
                value: 'Foo',
                disabled: true,
                max: 45
            ,
            lastName: 
                label: 'Last Name',
                state: true,
                value: 'Bar',
                disabled: true,
                max: 45
            ,
            address: 
                label: 'Address',
                state: false,
                value: 'Foo, Bar.',
                disabled: true,
                max: 255
            ,

我需要实现的目标

对于每个输入组字段，需要一一提供属性名称。假设我创建了一个名为 mydirective 的 vue 指令，代码简化如下。

<!-- HMTL -->
<b-input-group v-mydirective="inputOptions.firstName as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

<b-input-group v-mydirective="inputOptions.lastName as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

<b-input-group v-mydirective="inputOptions.address as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

//脚本

inputOptions: 
            firstName: 
                label: 'First Name',
                state: true,
                value: 'Foo',
                disabled: true,
                max: 45
            ,
            lastName: 
                label: 'Last Name',
                state: true,
                value: 'Bar',
                disabled: true,
                max: 45
            ,
            address: 
                label: 'Address',
                state: false,
                value: 'Foo, Bar.',
                disabled: true,
                max: 255
            ,

【问题讨论】：

vue 代码通常被编译，即它转换文档树。 （如babel）

您当然可以编写自己的文档解析器，但为什么不先尝试自定义元素呢？

您可能需要一个组件（或组件+指令组合）而不是您描述的指令。你想做什么？

我需要将一个包含字符串（键，值对）的对象传递给输入组组件，然后根据传递的值更改其中的字符串值。我不需要手动更改每个字符串值

如何使用组件来做到这一点？我不知道。

【参考方案1】：

HTML

在您的模板中，使用 v-for 遍历多个 inputOptions，例如：

<div id="app">
  <b-input-group v-for="option in inputOptions" :key="option.label" :option="option" />
</div>

脚本

为组、输入和标签创建自定义组件，例如：

Vue.component('b-label', 
  props: ['label'],
  template: '<div> label </div>'
)

Vue.component('b-form-input', 
  props: ['state', 'value', 'disabled', 'maxlength'],
  template: '<input type="text" :value="value" />'
)

Vue.component('b-input-group', 
  props: ['option'],
  template:
  `<div>
    <b-label :label="option.label" />
    <b-form-input
        :state="option.state"
        v-model="option.value"
        :disabled="option.disabled"
        :maxlength="option.max" />
  </div>`
)

小提琴

Here is a demo on JSFiddle

这是一个如何使用组件的基本示例。您需要对字符串进行的任何转换都可以通过computed 属性或方法在相关组件中完成。您可以通过单击我使用computed 属性将标签转换为小写的链接来查看演示。这应该足以让你继续前进。