我是否可以将现有的vue组件用作单个文件组件
我是否可以将现有的vue组件用作单个文件组件
提问于 2019-06-12 07:31:34
所以我有一个vue应用程序，我刚刚把它写进了一个由django提供服务的.html文件。我现在正在尝试使用CLI转移到一个专用的vue.js项目，所以我想拆分那个文件中的所有组件，并将它们移动到各自的vue文件中。
我的问题是，我可以只创建一个名为Overview.vue的文件，然后将我的组件原样复制并粘贴到其中吗？-或者我需要做一些修改吗？
我看到的大多数单文件组件的示例都有专用于<style> <template> <script>的块。在我粘贴在下面的组件中，模板位于组件内部。我需要改变这个吗？
Vue.component('overview', {
delimiters: [ '[[', ']]' ],
props: ['jobs', 'links'],
template: `
<div overview>
<h3>Overview</h3>
<table :style="overviewStyle">
<tr>
<td>Start Time</td>
<td>[[ jobs[0].time_start ]]</td>
</tr>
</table>
</div>
`,
computed: {
overviewStyle() {
return {
'padding': '8px',
'width': '100%',
'display': 'table',
};
},
methods: {
getStyle (name) {
switch (name) {
case 'SUCCESS':
return {
'background-color': '#dff0d8',
'padding': '10px',
'line-height': '1.42857143',
'border': '1px solid #C0C0C0',
}
case 'IN_PROGRESS':
return {
'background-color': '#f4dc42',
'padding': '10px',
}
case 'FAILURE':
return {
'background-color': '#f45942',
'padding': '10px',
'line-height': '1.42857143',
'border': '1px solid #C0C0C0',
}
};
},
},
});回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-12 07:41:50
是的，您需要遵循Vue Single File Components的结构。
它接受3个块，<template>，<script>和<style>。
<template>
<!-- your template here -->
</template>
<script>
// javascript here
export default {
data() {
return { ... }
},
methods: { ... }
// etc
}
</script>
<style>
/* any css here */
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56552857
复制相关文章
相似问题
腾讯云开发者
