Как передать параметры из blade шаблона во vue.js 3 компонент?

@shayna.buckridge 

Есть несколько способов передачи параметров из Blade шаблона в компоненты Vue.js 3:

1. Передача параметров через атрибуты при инициализации компонента: В Blade шаблоне укажите атрибуты и их значения при создании компонента: Затем в компоненте Vue.js вы можете использовать переданные параметры через props: export default { props: ['param1', 'param2'], //... }
2. Использование глобальных переменных: Вы можете объявить переменные в глобальном пространстве имен в вашем Blade шаблоне или создать скрипт перед инициализацией Vue.js: Затем в компоненте Vue.js вы можете использовать глобальные переменные: export default { data() { return { param1: window.param1, param2: window.param2 } }, //... }
3. Передача параметров через атрибуты данных компонента: В Blade шаблоне вы можете определить данные, которые будут доступны в компоненте: Затем в компоненте Vue.js вы можете использовать переданные параметры: export default { data() { return { param1: '', param2: '' } }, mounted() { this.param1 = this.$props.param1; this.param2 = this.$props.param2; }, //... } Эти методы могут быть сочетаны для передачи сложных данных в компоненты.

@shayna.buckridge 

Примерно такой код может быть реализован для каждого из способов:

Передача параметров через атрибуты при инициализации компонента:

Blade шаблон:

1

<my-component param1="value1" param2="value2"></my-component>

Vue компонент:

1
2
3

export default {
  props: ['param1', 'param2']
}

Использование глобальных переменных:

Blade шаблон:

1
2
3
4

<script>
  window.param1 = 'value1';
  window.param2 = 'value2';
</script>

Vue компонент:

1
2
3
4
5
6
7
8

export default {
  data() {
    return {
      param1: window.param1,
      param2: window.param2
    }
  }
}

Передача параметров через атрибуты данных компонента:

Blade шаблон:

1

<my-component :param1="value1" :param2="value2"></my-component>

Vue компонент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

export default {
  data() {
    return {
      param1: '',
      param2: ''
    }
  },
  mounted() {
    this.param1 = this.$props.param1
    this.param2 = this.$props.param2
  }
}

Надеюсь, эта информация была полезна. Если у вас возникнут дополнительные вопросы, не стесняйтесь их задавать.