2

Есть несколько компонентов, у которых одинаковый код в секции template. Все компоненты - это однофайловые компоненты (single file). Существуют ли механизмы, позволяющие вынести секцию template во внешний файл и потом его подключить к компонентам?

<template>
<h1>Заголовок</h1>
<p>текст</p>
</template>

Спасибо.

2
  • Приведите, пожалуйста, хотя бы примерный код, как это выглядит у вас 12 мар 2018 в 13:49
  • @ДанилЧугаев Пожплуйста. Вопрос не в коде, а в оптимизации компоненты. Но, если это Вам как-то поможет, пожалуйста, код выше.
    – Alex
    12 мар 2018 в 13:54

4 ответа 4

1

Вы можете поступить следующим образом: все что находится в template оформить отдельным компонентом, и вызывать его в нужных местах, а данные в него передавать через props. Пример:

//файл main.vue
<template>
  <div>
     <my-component :dataComponent="temp"></my-component>
  </div>
</template>

<script>
  import myComponent from './my_component.vue'

  export default {
     components: [myComponent],
     data () {
       return {
         temp: {
           a: 1,
           b: 2
         }
       }
     }
  }
</script>

//файл my_component.vue
<template>
  <div>
    {{dataComponent.a}} + {{dataComponent.b}} = 3
  </div>
</template>

<script>        
  export default {
    props: ['dataComponent']
  }
</script>

Про props можете почитать в документации

P.S.: это очень упрощенный пример.

8
  • Спасибо за пример. Только тут проблема в том, что я вижу передаваемый аргумент в темплейте. Но если значение аргумента присваиваю переменной, то при передаче другого значения в параметре внутри компонента ничего не меняется. Напрмиер: передаю ` //main.vue <my-component :dataComponent="selectNavi"></my-component> methods: { selectNavi: function (event) { this.naviName = event.currentTarget.innerText; } ` В файле my_component.vue могу вывести в секции <template> вот так: <p>{{ dataComponent }}</p>
    – Alex
    12 мар 2018 в 14:53
  • Но вот этот код не показывает новое значение. Постоянно видно значение, которое было присвоено ему при первом рендеринге: ` created: { console.log(this.dataComponent) } `
    – Alex
    12 мар 2018 в 14:53
  • То что вы передаете selectNavi - это должен быть объект, а не функция)) тогда у вас будут видны обновления внутри компонента. 12 мар 2018 в 14:56
  • Приношу извинение. Передаю naviName. Т. е. код такой: ** <my-component :dataComponent="naviName"></my-component> **
    – Alex
    12 мар 2018 в 15:05
  • Может быть функция вызывается 1 раз? Если делать через v-model, тогда значение в дочернем элементе однозначно будет изменяться. Посмотрите пример в документации про динамические входные параметры 12 мар 2018 в 15:37
1

Ну или так

<template src="template.html"></template>
0
  1. Создаете компонент test.vue
  2. В main.js его импортируете
  3. Объявляете компонент

Vue.component('classname', test);

  1. В test.vue пишите шаблонный код.
  2. В родительском шаблоне объявляете <classname></classname>
0

Если используется webpack, то шаблон можно объявить в отдельном файле и далее его импортировать:

template.html

<div>
  <h1>Заголовок</h1>
  <p>текст</p>
</div>

index.js

import template from './template.html';

export default {
    name: 'component_name',
    template
}

PS. Потребуется html-loader

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.