Question

因此，我有一个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',
        }
      };
    },
  },
});

Answer 1

是的，您需要遵循Vue Single File Components的结构。

它接受<template>，<script>和<style> 3个块。

<template>
  <!-- your template here -->
</template>

<script>
  // javascript here
  export default {
    data() {
      return { ... }
    },
    methods: { ... }
    // etc
  }
</script>

<style>
  /* any css here */
</style>

我可以将现有的vue组件用作单个文件组件吗？

1 个答案: