Vue2 + laravel6 - 组件实现

Question

我刚开始将 Vue2 与 Laravel6 结合使用，但在尝试了解如何使用组件方法时遇到了困难。

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

当我查看 resouces/js/app.js 的 laravel6 代码时，它看起来像这样：

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

我查看了 js/components/ExampleComponent.vue，希望看到其中声明的一些选项。但是，ExampleComponent.vue 文件中没有选项。相反，我看到了 <template></template> 标签。显然，<template></template> 标签似乎可以用作 'template:' 选项。

我有两个问题：

<template></template> 标签与 'template:' 选项的含义相同吗？
如果问题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

Vue2 + laravel6 - 组件实现

Vue2 + laravel6 - Component implementation

laravel

vue.js

vuejs2

laravel-6

第一种

第二种

终于