Question

我想摆脱vue 2.x应用程序中使用的html中的两行。不需要包含<template scope="props">和相应</template>的行。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <my-component>
    <template scope="props">
      <p>{{props.test}}</p>
    </template>
  </my-component>
</div>

我宁愿定义自己的组件属性来定义范围名称

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <my-component with="props">
    <p>{{props.test}}</p>
  </my-component>
</div>

因此，我们不会将HTML的编写者暴露给templates和scopes的概念，而是在my-component内执行此操作。

是否有人知道vue模板机制是否在这样的组件内部进行扩展？

Answer 1

拥有组件的好处是它可以在多个地方重复使用。所以想法是在一个地方定义template，你可以在多个地方使用它。

您编写的示例，您将能够再次使用它。组件的模板通常不在组件内部定义，它将是独立的，并且该组件可以在多个位置使用。

请参阅以下一个示例：

<div id="app">
  <template id="item-edit">
    <li>
      <span v-show="!inEdit">{{item.name}}</span>
      <input v-show="inEdit" type="text" v-model="item.name" />
      <a href="#" @click.prevent="toggle();">{{inEdit ? 'save' : 'edit'}}</a>
    </li>
  </template>
  <ul>
    <item-edit v-for="item in items" :item="item"></item-edit>
  </ul>
</div>

完整小提琴：http://jsfiddle.net/corh2tqo/

在没有<template>的情况下将数据注入范围

1 个答案: