Laravel Component 속성관련

 1# /resources/views/test/laravel/attributes.blade.php
 2 
 3# view 파일에서 변수설정
 4@php
 5$message = "메시지 입니다. 다음과 같이 메시지를 보여집니다.";
 6$hasError = false;
 7@endphp
 8 
 9# 컴포넌트 포함
10<x-test.attributes type='error' :message="$message" :$hasError class="mb-4"  message1="message" txt="txt" :maxWidth>
11 
12    <div class=" border">
13    {{ $message }}
14    </div>
15 
16</x-test.attributes>
17 
18// 속성과 변수를 설정하는 차이가 있다.
19<x- 라라벨 컴포넌트를 삽입시 속성을 설정할 수 있다.
20어떤건 속성이 되고 어떤건 변수가 되는 차이는 뭘까 ?
21 
22@prop 에서 설정하지 않으면 모두 속성으로 처리된다.
23php 변수값을 속성 또는 변수로 받을려면 ":변수" 로 설정해야 한다.
24하지만, @prop 에서 설정하지 않으면 모두 속성처리 된다.
25 
26속성값은 컴포넌트 내부에서 $attributes 변수로 확인할 수 있다. 배열로 들어감.
27 
28 
29# :message="$message" 가 컴포넌트에 데이타를 전달하는 기본 방법이다.
30# :message="$message" 와 :$message 는 동일한 표현법이다. (간단한방식)
31 
32# 나머지는 속성으로 처리된다.
33# $attributes 변수에서 값을 확인 할 수 있다.
34 
35# 컴포넌트에서 $attributes->get() 으로 확인할 수 있다.
36{{ $attributes->get('type') }}
37{{ $attributes->get('message1')}}
38{{ $attributes->get('txt')}} // 속성으로 처리되기 때문에 컴포넌트에서 변수로 처리되지 않는다.

 1# /resource/views/component/test/attributes.blade.php
 2# 컴포넌트 소스
 3 
 4@props([
 5'hasError' => false,
 6'maxWidth' => '2xl',
 7'txt' => '기본값 지정',
 8])
 9 
10# props 에서 변수로 설정하지 않으면 모두 속성처리된다.
11 
12# $attributes에는 2가지 메서드를 제공한다.
13# $attributes.merge();
14# $attributes.class();
15 
16# 2가지 같은 이름의 title 가 있다..
17 
181번째.
19<x-slot:title class="font-bold">
20    slot:title
21</x-slot>
22 
232번째.
24<x-slot name="title">
25    slot:title
26</x-slot>
27 
28# 같은 이름의 변수를 사용하는 경우.. 2번째만 작동한다.
29 
30 
31# slot:title 이름을 설정하고 속성 갖고오기
32<div {{ $title->attributes }}>{{ $title }}</div>
33<div {{ $title->attributes->class(['text-lg']) }}>{{ $title }}</div>
34 
35<div>{{ $maxWidth }}</div>
36<div {{ $attribute }}>
37    $attributes : {{ $attributes }}
38</div>
39 
40<div {{ $attributes->merge(['class' => 'alert alert-'.$attributes->get('type')]) }}>
41    {{ $slot }}
42</div>
43 
44$attributes->get('type')
45$attributes->get('class')
46 
47# props에서 속성과 동일한 변수를 설정한 경우 값이 사라짐.
48$attributes->get('txt')
49 
50# 즉 속성으로 설정했다고 해도 컴포넌트에서 동일한 이름으로 변수를 설정한 경우는 attributes bag 에서 빠진다.
51{{ $txt }}
52 
53$attributes->merge(['class' => 'alert alert-'.$attributes->get('type')])
54attributes->class(['p-4', 'bg-red-500' => $hasError ])
55 
56 
57<x-test.attributes type='error' :message="$message" class="mb-4" :$hasError message1="message" txt="txt"
58maxWidth="xl">
59 
60    <x-slot:title class="font-bold">
61    slot:title
62    </x-slot>
63 
64    {{ $message }}
65 
66</x-test.attributes>

    # <x-slot:title class="font-bold">
    # slot:title
    # </x-slot>

    # slot:title 이름을 설정하고 속성 갖고오기
    <div {{ $title->attributes }}>{{ $title }}</div>
    <div {{ $title->attributes->class(['text-lg']) }}>{{ $title }}</div>

    <div>{{ $maxWidth }}</div>
    <div {{ $attribute }}>
    {{ $attributes }}
    </div>

    <div {{ $attributes->merge(['class' => 'alert alert-'.$attributes->get('type')]) }}>
        {{ $slot }}
    </div>

    $attributes->get('type')
    $attributes->get('class')

    # props에서 속성과 동일한 변수를 설정한 경우 값이 사라짐.
    $attributes->get('txt')

    # 즉 속성으로 설정했다고 해도 컴포넌트에서 동일한 이름으로 변수를 설정한 경우는 attributes bag 에서 빠진다.
    {{ $txt }}

    $attributes->merge(['class' => 'alert alert-'.$attributes->get('type')])
    attributes->class(['p-4', 'bg-red-500' => $hasError ])