vue slot的呼叫方法

首先，我們常見的html標籤是這樣的：

這裡是內容div>

這裡是插入的內容datatablepage>

tablecontent>
【如果沒有內容則顯示我】solt>
div>
template>

這裡寫內容是完全可以的啊datatablepage>

name="prepend">【如果沒有內容則顯示我1】solt>
tablecontent>
div>
template>

name="prepend">我是父元件傳入的內容div>
div>
datatablepage>

slot 在子元件中預留乙個位置，或者給乙個預設內容，如果傳入新的內容，那麼會取代預設的內容，如果 不傳入，則顯示預設內容。

通過name屬性可以區分不同的slot，傳入不同的slot內容。

父元件模板的所有東西都會在父級作用域內編譯；子元件模板的所有東西都會在子級作用域內編譯。

v-for="todo in todos"
v-bind:key="todo.id"
>
v-bind:todo="todo">
}slot>
li>
ul>

v-bind:todos="todos">

slot-scope="slotprops">
v-if="slotprops.todo.iscomplete">✓span>
}template>
todo-list>

v-bind:todos="todos">

slot-scope="">
v-if="todo.iscomplete">✓span>
}template>
todo-list>

v-bind:todos="todos">

slot-scope="">
v-if="todo.iscomplete">✓span>
}div>
todo-list>

vue slot插槽的使用

vue官方文件在slot這部分講解的並不是很詳細，這裡用更通俗的語言進行描述。根據官檔的標題來開始吧 假如父元件的 如下 children為註冊的子元件 這裡是插槽的內容，位於子元件內部 渲染結果 這裡是子元件，注意 沒有加入slot標籤哦！上面的 實際效果如下 這裡是父元件 這裡是子元件，注意 沒...

Vue slot 插槽的使用

slot插槽作為分發內容的出口 假設看這篇文章的你已經有了一定的vue元件基礎 let btn vue.component btn template 1 上述 建立了乙個名為btn的全域性元件。接下來我們在其他頁面中呼叫這個外掛程式 let vm new vue template 得到的頁面效果如下...

Vue slot插槽的使用

lang en charset utf 8 插槽title head slot slot1 up value data title up slot slot2 down value book v for book in books down shouhe div src script src scr...