如何使用 x-template 从 Vue 组件中分离出模板

Question

尝试如下从 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 组件中分离模板的替代方法。

Answer 1

您在 HTML 文件中定义 X-Templates。请参阅下面的简短演示

// 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>

Answer 2

对不起，我的英语不好，这不是我的主要语言！

试试吧！

你需要在同一个目录下生成两个文件：

• path/to/checkboxComponent.vue
• path/to/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);