第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在插槽內(nèi)的組件內(nèi)使用組件...不知道怎么說

在插槽內(nèi)的組件內(nèi)使用組件...不知道怎么說

胡說叔叔 2022-07-08 10:22:27
我正在使用一個名為Hooper的滑塊組件。一切都很好,顯然我為此創(chuàng)建了一個單獨(dú)的組件,因為我不想將它包含在我的全局應(yīng)用程序中,因為我并不總是使用它。<template>    <hooper :infiniteScroll="true">        <slide v-for="(image, index) in images" :style=" { backgroundImage: 'url(\'img/' + image + '\')' }" :key="index">dsadasd</slide>    </hooper></template><script>    import { Hooper, Slide } from 'hooper';    import 'hooper/dist/hooper.css';    export default {        props: [            'images'        ],        name: 'Hooper',        components: {            'hooper': Hooper,            'slide': Slide        }    };</script>所以要使用這個組件,我將它添加到我的刀片文件中,如下所示:@extends('layouts.app')@section('content')    <carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel"></carousel>    <div class="container">        <h1 class="p-4 text-lg font-sans">Home</h1>    </div>@endsection我的問題因此,我希望能夠向每張幻燈片添加我想要的任何 HTML,并定義圖像名稱,因此在理想情況下,我的刀片文件中會包含以下內(nèi)容:@extends('layouts.app')@section('content')    <carousel class="carousel">        <slide :style=" { backgroundImage: 'url(\'img/image-1.jpg\')' }">            <h3>header text</h3>                    <p>dsadasfhshshsgfgas</p>        </slide>        <slide :style=" { backgroundImage: 'url(\'img/image-2.jpg\')' }">            <h3>header text 2</h3>                    <p>dsadasdsdsadsafhshshsgfgas</p>        </slide>    </carousel>    <div class="container">        <h1 class="p-4 text-lg font-sans">Home</h1>    </div>@endsection但是幻燈片不是注冊組件,我該怎么做?對此有另一個想法。以為我可以為組件中的每個循環(huán)創(chuàng)建一個插槽,然后在刀片文件中覆蓋該插槽,如下所示:Carousel.vue<template>    <hooper :infiniteScroll="true" class="carousel">        <slide v-for="(image, index) in images" :style=" { backgroundImage: 'url(\'img/' + image + '\')' }" :key="index">            <slot :name="'slide' + index"></slot>        </slide>    </hooper></template>這似乎不起作用,我不確定為什么,有人知道解決方法嗎?
查看完整描述

1 回答

?
寶慕林4294392

TA貢獻(xiàn)2021條經(jīng)驗 獲得超8個贊

您的最后一個帶有動態(tài)插槽名稱的示例應(yīng)該可以工作,除非它使用了錯誤的 v-slot。您的預(yù)期用途可能是


<carousel :images="[ 'slider-1.jpg', 'slider-2.jpg', 'slider-3.jpg' ]" class="carousel">

  <template #slide1="slotProps">    // slotProps are optional here, if you want to pass data from Hooper/Slide to the slot

    <h2> Header </h2>

    <p> Text </p>

  </template> 

  <template #slide2>

    <h3> Different Header </h3>

    <div> Different Text </div>

  </template>

</carousel>

v-slot="slide1" 等價于 v-slot:default="slide1",例如,您將默認(rèn)插槽(不可用)接收到的道具分配給名稱 slide1。


查看完整回答
反對 回復(fù) 2022-07-08
  • 1 回答
  • 0 關(guān)注
  • 113 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號