Vue 3 여러 구성 요소를 통해 슬롯을 전달하는 방법

프로젝트 전체에서 재사용할 수 있는 지정된 셀이 포함된 거대한 테이블을 만들려고 합니다. 내 테이블 구성 요소에 다른 셀 구성 요소를 전달하고 싶습니다. 하지만 여러 하위 노드를 통해 명명된 슬롯을 전달하는 방법을 모르겠습니다. 저는 Vuev3.2.45를 사용하고 있으며 ID와 명명된 슬롯 테스트에서 했던 것처럼 App.vue에서 명명된 슬롯 셀의 SlotProps를 사용할 수 있기를 원합니다. //App .vue를 명확하게 하기 위해 여기에 놀이터를 만들었습니다. <scriptsetuplang="

P粉216203545 2023-08-27 00:15:30 0  1  589

콘텐츠를 슬롯에 렌더링하는 방법

아래와 같이 하위 구성 요소에 슬롯이 있는 버튼을 만들었습니다. 슬롯의 이름은 SlotDigitizePolygonBtnLabel입니다. 하위 구성 요소의 버튼에는 버튼이 비활성화되었는지 여부를 나타내는 장애 상태라는 속성이 있어야 합니다. 상위 구성 요소에서 하위 구성 요소의 버튼을 렌더링하고 상위 구성 요소의 장애 상태 값을 하위 구성 요소로 전달하려고 합니다. 코드를 실행하면 아무것도 렌더링되지 않습니다. 오류가 발생한 위치와 해결 방법을 알려주십시오. 하위 어셈블리

P粉877114798 2023-08-18 00:30:15 0  1  583

Vue3 및 Storybook 7에서 슬롯을 처리하는 방법

ButtonAsSlot 스토리에서 하나의 구성 요소(UIButton)를 다른 구성 요소(UICard)의 슬롯으로 전달하려고 합니다. ButtonAsSlot 스토리에서는 default:''를 args.default로 전달하므로 슬롯에 전달됩니다. 기존 스토리(예: 기본값: '')를 전달할 수 있다면 좋을 것입니다. 그러나 이것은 작동하지 않습니다. 다음을 시도했지만 오류가 발생합니다. Storybook에 예기치 않은 식별자 '객체'가 있습니다. constdi

P粉504920992 2023-08-26 00:23:54 0  1  654

Vue JS의 배열을 기반으로 슬롯 필드를 동적으로 추가/제거하는 방법

반복할 HTML 필드가 포함된 슬롯을 허용하는 다음 코드가 있습니다. <divv-for="(row,index)inrows":key="index"><divclass="d-flexjustify-content-between" > <slotname="필드"></slot&g

P粉639667504 2023-08-28 17:43:21 0  1  503

vue3을 사용하여 슬롯에서 HTMLElement를 얻는 방법은 무엇입니까?

Layer 컴포넌트를 개발하려고 할 때 문제가 발생했습니다. 코드는 다음과 같습니다: //Wrapper.vue&lt;template&gt;&lt;slotv-bind="attrs"&gt;&lt;/slot&gt;&lt;/template&gt;&lt;scriptlang="ts&qu

P粉794177659 2023-09-01 17:57:52 0  1  699

Vue 슬롯 요소를 사용하여 템플릿 루프에서 렌더링

슬라이드의 HTML을 구성 요소에 전달한 다음 슬롯 //carousel.blade.php <my-carousel><templatev-slot:slides><div>slide1</ div를 사용하여 다른 구성 요소로 렌더링하려고 합니다. ><div>slide2</div></template></my-carousel

P粉514458863 2023-09-15 10:37:00 0  1  609

슬롯을 사용하여 캐러셀을 만드는 방법은 무엇입니까?

사람들은 일련의 이미지를 사용하여 캐러셀을 만드는 동일한 방법을 계속 보여주었습니다. 그러나 캐러셀의 각 슬라이드에 라이트박스 구성 요소가 포함되기를 원하기 때문에 이 접근 방식은 융통성이 없습니다. 이 경우 캐러셀 배열에 넣은 이미지에 대한 라이트박스 기능을 재정의하고 싶지 않습니다. 정말 좋지 않나요? 코드를 적게 작성하고 Vue.js의 재사용 가능한 구성 요소를 그 어느 때보다 유용하게 만드세요. 슬롯을 사용하는 아주 좋은 예를 찾았습니다. GitHub의 SSENSE가 만든 VueCarousel. 능숙하지 않은 웹 개발자로서 ...

P粉817354783 2024-01-10 16:53:13 0  1  436

VSelect - Select가 Vuetify 3의 사용자 정의 '프로젝트' 슬롯에서 작동하지 않습니다.

내 Vue3 애플리케이션에서 Vuetify3의 VSelect를 사용하고 있으며 항목 슬롯을 사용하려고 합니다. 하지만 내 VSelect 옵션을 선택할 수 없게 됩니다. 다음 VSelect 요소가 있습니다: <v-selectv-model="tag":items="tags"variant="solo" label="Tags"><template#

P粉166779363 2023-08-26 12:35:37 0  1  577

props에서 추론된 일반 데이터 유형이 있는 Vue 3/Nuxt 3 범위 슬롯

Nuxtv3에 캐러셀 컴포넌트를 구현하고 싶습니다. 이 구성요소는 항목 목록을 수신합니다. 이 구성 요소는 스타일이나 구조가 아닌 논리만 구현합니다. 이제 이것은 내 구성요소입니다: Components/tdx/carousel.vue<template><div><slotname="last"></slot><divv-for="iteminiitems"><slotna

P粉863295057 2023-11-02 21:59:05 0  1  761

내 템플릿에 헤더 블레이드 파일을 포함하고 싶지만 "정의되지 않은 변수 $slot" 오류가 계속 발생합니다.

현재 Laravel의 Blade 템플릿을 사용하는 데 문제가 있습니다. 템플릿 파일을 성공적으로 생성하고 이를 다른 페이지로 확장했습니다. 그러나 하위 블레이드 템플릿에 머리글과 바닥글을 포함하려고 하면 "변수 $slot이 정의되지 않았습니다"라는 오류 메시지가 나타납니다.

P粉596161915 2023-08-06 17:23:03 0  1  595