Как передать и использовать props для однофайловых компонентов?

Question

Есть однофайловый компонент parkInfo.vue, я пытаюсь передать с main.js, где регистрируется этот компонент, входной параметр park.
main.js тут регистрирую компонент

Vue.component(
    "popup",
    require("./vue-components/parkInfo.vue").default,
    {
        props: [ "park" ]
    });

parkInfo.vue сам этот компонент

<template>
    <div>
        <div class="modal-header">
            <h1>...</h1>
            <h2>{{ park }}</h2>
        </div>
        <div class="modal-body">
            {{ ... }}
        </div>

    </div>
</template>

<script>
     ...
</script>

home.blade.php здесь использую этот компонент

<div id="modal">
    <popup park="Какой то известный парк"></popup>
</div>

Выводится такая ошибка в консоли:

P.S. Если декларировать свойство park и оставить его, к примеру с пустым значением ("") как об этом говорится в документации, то vue будет использовать именно это значение, а не то, что было передано во входном параметре

Answer 1

Vue.component( id, [definition] ) принимает два аргумента (согласно Vue API)

Пример использования props в компоненте:

Vue.component('my-component', {
  props: {
    testvalue: {
      type: String,
      default: 'no string'
    },
  },
  template: `
  <fieldset>
  <legend>Компонент my-component</legend>
  props testvalue = <b>{{ testvalue }}</b>
</fieldset>
  `
})

const app = new Vue({
  el: '#app',
  data: {
    valueforcomponent: 'Строковое значение для компонента'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <my-component :testvalue="valueforcomponent"></my-component>
</div>

БЛОГ НА HUSL

Как передать и использовать props для однофайловых компонентов?

Ответы (1 шт):