Как использовать x-template для отделения шаблона от Vue Component - PullRequest
Новая
       25

Как использовать x-template для отделения шаблона от Vue Component

0 голосов
/ 12 сентября 2018

Пытался отделить шаблон от компонента Vue, как показано ниже, но он не работает.Ссылка только на файл vue.js, а не на просмотр. 

Vue.component('my-checkbox', {
    template: '#checkbox-template',
    data() {
        return { checked: false, title: 'Check me' }
    },
    methods: {
        check() { this.checked = !this.checked; }
    }
});

<script type="text/x-template" id="checkbox-template">
    <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <div class="title"></div>
    </div>
</script>

Или любой альтернативный способ отделения шаблона от компонента vue.

Ответы [ 2 ]

0 голосов
/ 20 мая 2019

Извините за мой плохой английский, это не мой основной язык!

Попробуй!

Вам нужно сгенерировать два файла в одном каталоге:

  • путь / к / checkboxComponent.vue
  • путь / к / checkboxComponent.html

В файле checkboxComponent.vue 

<script>
// Add imports here eg:
// import Something from 'something';
export default {
    template: require('./checkboxComponent.html'),
    data() {
        return { checked: false, title: 'Check me' }
    },
    methods: {
        check() { this.checked = !this.checked; }
    }
}
</script>

В файле checkboxComponent.html 

<template>
    <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <div class="title"></div>
    </div>
</template>

Теперь вам нужно объявить этот Компонент в том же файле, который вы объявляете приложением Vue, следующим образом: 

Vue.component('my-checkbox', require('path/to/checkboxComponent.vue').default);

В моем случае

У меня есть три файла с такой структурой каталогов: 

js/app.js
js/components/checkboxComponent.vue
js/components/checkboxComponent.html

В app.js я объявляю приложение Vue, поэтому путь к методу require должен начинаться с точки, например: 

Vue.component('my-checkbox', require('./components/checkboxComponent.vue').default);
0 голосов
/ 12 сентября 2018

Вы определяете X-Templates в своем HTML-файле. Ниже приведена краткая демонстрация 

// this is the JS file, eg app.js
Vue.component('my-checkbox', {
    template: '#checkbox-template',
    data() {
        return { checked: false, title: 'Check me' }
    },
    methods: {
        check() { this.checked = !this.checked; }
    }
});

new Vue({el:'#app'})
/* CSS file */
.checkbox-wrapper {
  border: 1px solid;
  display: flex;
}
.checkbox {
  width: 50px;
  height: 50px;
  background: red;
}
.checkbox.checked {
  background: green;
}
<!-- HTML file -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script type="text/x-template" id="checkbox-template">
    <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <div class="title">{{ title }}</div>
    </div>
</script>
<div id="app"> <!-- the root Vue element -->
  <my-checkbox></my-checkbox> <!-- your component -->
</div>
...