时间戳

首页 > 解决方案 > 创建 HTML 的 Vue 组件中的插值

javascript - 创建 HTML 的 Vue 组件中的插值

问题描述

我正在使用 Vue 2.6.x 构建一个 Web 应用程序。在创建的原型中，我们有这样的一行重复了很多次：

<label class="title">On Time</label><span class="score float-right">Score: {{ score.ap_ontime }}

整行中唯一改变的部分是{{ }}. 我想把它变成一个我可以多次调用的组件。例如：

<MyLabel title="On Time" score="score.ap_ontime" />

...这样我就不必在一个长的 HTML 文件中一遍又一遍地输入这个分数插值。我知道如何将道具传递给组件并将文本添加到组件的模板中：

<template>
...
<label class="title">{{title}}</label>
...
</template>

..但我不知道如何获取一个字符串（例如score.ap_ontime）并让模板注入一些东西，这些东西将从score应用程序中存在并导入模板的普通旧 JavaScript 对象呈现该值。我在这篇文章顶部显示的原始代码渲染良好，并对 JavaScript 对象的变化做出反应我只是不知道如何在基于 props 创建 HTML 和 Vue 模板语法的组件中执行此操作。

标签： javascriptvue.js

解决方案

您的新组件应如下所示：

<template>
  <label class="title">{{ caption }}</label>
  <span class="score float-right">Score: {{ onTime }}</span>
</template>

<script>
export default
{
  name: 'MyNewComponent',
  props:
  {
    caption:
    {
      type: String,
      default: ''
    },
    onTime:
    {
      type: [String, Number],
      default: 0
    }
  }
}
</script>

然后你可以用这种方式调用你的组件：

<my-new-component :caption="Big title" :on-time="score.ap_ontime" />

推荐阅读