Vue2 + laravel6 - 组件实现

Question

我刚开始在 Laravel6 中使用 Vue2，在尝试了解如何使用组件方法时卡住了。

由于我是 Vue 的新手，所以我使用 Vue 的官方教程作为参考。我从这里(https://vuejs.org/v2/guide/components.html) 学到的关于 Vue 组件实例化的知识是我们为组件提供了选项。（例如，我们为 HTML 部分提供了 'template:' 选项。）

当我查看 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 对象中添加为 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 的标签

更多信息请阅读article