Вставка данных в область без ‹шаблона›

Я хотел бы избавиться от двух строк в html, используемом в приложении vue 2.x. Строки с <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 для расширения внутри таких компонентов?


vue.js vuejs2 vue-component
person mgoetzke    schedule 26.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Преимущество наличия компонента заключается в том, что его можно повторно использовать в нескольких местах. поэтому идея состоит в том, чтобы определить 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/

person Saurabh    schedule 26.12.2016
comment
Я понимаю, но мы вообще не используем такие шаблоны. Нам просто нужно это как область включения. то есть мы позволяем дизайнерам жить, писать некоторые проекты. в них иногда полезно динамически ссылаться на данные. ‹rs-get id=some-data-id-to-lookup as=localVarName› ‹strong›{{localVarName.fullName}}‹/strong› ‹/rs-get› в этих случаях внутренний шаблон по-прежнему является частью внешняя область обычно просто с некоторой введенной дополнительной информацией. Нет необходимости в повторном использовании вообще. PS: Почему комментарии к ответам не форматируются одинаково? :) - person mgoetzke; 26.12.2016
comment
@mgoetzke Если вы не используете компоненты где-либо еще, вы можете просто написать простой HTML и не создавать эти компоненты, зачем увеличивать сложность без дополнительной выгоды. - person Saurabh; 27.12.2016
comment
нам нужна привязка данных к компонентам, как показано в примере, данные внешнего компонента привязаны и дополнены в дочерних элементах my-component - person mgoetzke; 27.12.2016