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的标签

欲了解更多信息，请阅读这篇文章