Я только начал использовать Vue2 с Laravel6 и застрял, пытаясь понять, как использовать метод компонента.

Поскольку я совсем новичок в Vue, я использую официальный учебник Vue в качестве справочника. То, что я узнал отсюда (https://vuejs.org/v2/guide/components.html) об инстанцировании компонента Vue - это то, что мы задаем опции компоненту (например, мы задаем опции 'template:' для HTML-части).

Когда я смотрю на код laravel6 resouces/js/app.js, он выглядит примерно так:

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

Я просмотрел файл js/components/ExampleComponent.vue, ожидая увидеть там объявленные опции. Однако в файле ExampleComponent.vue нет никаких опций. Вместо этого я вижу тег <template></template>. Судя по всему, тег <template></template> работает как опция 'template:'.

У меня есть два вопроса по этому поводу:

  1. Имеет ли тег <template></template> то же значение, что и опция 'template:'? 2. Если ответ на первый вопрос положительный, могут ли другие опции также заменяться соответствующими тегами? (Например, могу ли я использовать тег <props></props> для опции 'props:'? или тег <data></data> для опции 'data:'?

Заранее спасибо!

Umaru

Ответы (1)

В мире Vue существует два популярных типа определения компонента.

Первый тип

в этом типе вы добавляете весь ваш HTML внутри свойства template, а props добавляете как атрибут внутри объекта component.

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

Второй тип

В этом типе вы добавляете логику вашего компонента в отдельный файл, заканчивающийся .vue, например, в laravel есть файл ExampleComponent.vue, в котором вы найдете тег template, просто как обертку для содержимого вашего компонента и вашей логики, которую вы можете написать, как указано ниже.

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

<script>
export default {
   props: [],
   methods: {

   },
   data(){
      return {
      }
   }
}
</script>

Наконец

не существует тега под названием props или data.

для получения дополнительной информации прочитайте эту статью

2022 WebDevInsider