Прикрепление произвольных атрибутов к компоненту Blade x, привязка атрибутов à la Vue. js - PullRequest
Новая
       5

Прикрепление произвольных атрибутов к компоненту Blade x, привязка атрибутов à la Vue. js

0 голосов
/ 20 апреля 2020

Я создал компонент (используя веб-библиотеку Material Components ).

У меня есть 2 потребности, которые я не смог решить, используя компоненты Laravel Blade X.

Чтобы иметь возможность добавлять произвольные, невидимые атрибуты в мои компоненты

Допустим, я использую компонент <x-mdc.top-app-bar /> в моем представлении index.blade.php: 

{{-- resources/views/index.blade.php --}}
<x-mdc.top-app-bar>
  <x-slot name="start">
    <x-mdc.top-app-bar-navigation />
    <x-mdc.top-app-bar-title>{{ config("app.name") }}</x-mdc.top-app-bar-title>
  </x-slot>
</x-mdc-top-app-bar>

Компонент создается следующим образом: 

{{-- resources/views/components/mdc/top-app-bar.blade.php --}}
<header class="top-app-bar">
  @isset($start)
    <section class="top-app-bar__section--start">{{ $start }}</section>
  @endisset
  @isset($end)
    <section class="top-app-bar__section--end">{{ $end  }}</section>
  @endisset
</header>

Итак, как вы можете видеть, я не планировал поддерживать какой-либо атрибут id. Но как потребитель компонента я бы хотел добавить его. Возможно, в будущем я бы также хотел добавить некоторые атрибуты data-x ...

Итак, мой первый вопрос: есть ли способ добавить потенциально бесконечное количество атрибутов при использовании компонента Blade x? ?

Чтобы можно было указать, где произвольные атрибуты находятся в компоненте

. Как я уже думал об этой проблеме, я помню, что Vue. js решен это с использованием того, что они называют «связанными атрибутами» (и методами). Таким образом, в Vue. js, даже если компонент не может предсказать какой-либо атрибут, вы можете не только добавить ряд произвольных атрибутов, но вы также можете перенаправить этот атрибут на вложенный уровень вашего компонента. Например, для аналогичного компонента, используемого в представлении в Vue. js: 

<!-- src/js/page/Home.vue -->
<template>
  <mdc-top-app-bar id="some-id">
    <!-- ... -->
  </mdc-top-app-bar>
</template>
<script>
import { MdcTopAppBar } from "../component";

export default {
  components: {
    MdcTopAppBar
  }
}
</script>

Можно сказать, что вы хотите, чтобы атрибуты были вложены на определенном уровне: 

<!-- src/js/component/MdcTopAppBar.vue -->
<template>
  <header class="mdc-top-app-bar">
    <div v-bind="$attrs"> <!-- <---------------- BINDING HERE, nested level style -->
      <!-- ... -->
    </div>
  </header>
</template>

И мой второй вопрос: можем ли мы сделать это и с компонентами Blade X?

1 Ответ

1 голос
/ 04 мая 2020

Вы можете использовать атрибуты тега лезвия: https://laravel.com/docs/7.x/blade#managing -атрибуты 

// Usage:
<x-alert type="error" :message="$message" class="mt-4"/>

// In component:
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>
...