尝试如下所述从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组件中分离出模板的任何其他方法。
答案 0 :(得分:0)
您在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>
答案 1 :(得分:0)
对不起,我的英语不好,这不是我的主要语言!
尝试一下!
您需要在同一目录中生成两个文件:
<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>
<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);