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

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/