Vue2 + laravel6 - 組件實現

Question

我剛開始將 Vue2 與 Laravel6 一起使用，並在嘗試了解如何使用組件方法時卡住了。

由於我是 Vue 的新手，所以我使用 Vue 的官方教程作為參考。 我從這里（ https://v2.vuejs.org/v2/guide/components.html ）學到的關於 Vue 組件實例化的知識是我們為組件提供選項。（例如，我們為 Z4C4ZDBpart.FCAED0038A 提供“模板：”選項。C）

當我查看 resouces resouces/js/app.js的 laravel6 代碼時，它看起來像這樣：

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

我查看了js/components/ExampleComponent.vue期望看到在那里聲明的一些選項。 但是，ExampleComponent.vue 文件中沒有選項。 相反，我看到<template></template>標記。 顯然， <template></template>標記似乎可以用作“模板：”選項。

關於上述問題，我有兩個問題：

1. <template></template>標簽是否與 'template:' 選項具有相同的含義？
2. 如果問題1是肯定的，其他選項是否也可以替換為相應的標簽？ （例如，我可以將<props></props>標記用於 'props:' 選項嗎？或<data></data>標記用於 'data:' 選項？

提前致謝！

Answer 1

在Vue世界中，定義component有兩種流行的類型

第一類

在這種類型中，您將所有HTML添加到template屬性中，並將props添加為component object 中的attribute

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

第二種類型

在這種類型中，您將component邏輯添加到以.vue結尾的單獨文件中，例如在laravel中有一個ExampleComponent.vue文件，您會在上面找到它只是template標簽，只是作為組件內容的包裝器，您可以編寫它的邏輯如下所述。

<template>
   // some content here
</template>

<script>
export default {
   props: [],
   methods: {
       
   },
   data(){
      return {
      }
   }
}
</script>

最后

沒有稱為props或data的標簽

欲了解更多信息，請閱讀這篇文章