當父元件向子元件傳值的時候，有時候，父元件傳的並不是單純的數值、字串，有可能是帶標籤（dom）的資料，那麼如何傳值呢？
如果我們像正常父向子傳值那樣操作。
content="hello,slot
">
slott>
class="slott">
}div>
div>
template>
export default
} }
script>效果：
我們可以看到顯示的並不是我們想要的，當然我們可以在子元件在接受的時候，使用v-html。
class="slott">
v-html='content1'>
div>
div>
template>效果：
div標籤雖然可以實現，但是如果有很多dom元素呢？顯然不好控制，所以vue中提供了slot插槽的方式
一.插槽
在父元件中直接插入正常的dom結構
你好solt!p>
slott>
class="slott">
slot>
div>
template>
export default
} script>效果：
在實際開發中，我們經常會遇到一種情況，將 header和footer傳進來。
在父元件中：
headerdiv>
footerdiv>
slott>在子元件中：
slot>
contentdiv>
slot>結果：
父元件的插槽中命名。
slot="header">headerdiv>
slot="footer">footerdiv>
slott>在子元件引用名稱
name="header">
slot>
contentdiv>
name="footer">
slot>效果：
在插槽中去掉header
slott>在呼叫的時候找不到header的話，就會顯示預設的內容
name="header">defaultslot>
contentdiv>
name="footer">
slot>效果：
有時候，我們在使用插槽的時候，希望父元件可以控制插槽的內容，
什麼時候用作用域插槽呢？當子元件做迴圈或者某一部分它的dom結構應該由外部傳遞進來的時候，這個時候我們用作用域插槽
使用作用域插槽，子元件會向父元件的作用域裡傳遞資料。
父元件使用插槽，要包含在template標籤中。props是自定義的名字
eg：
template>
slott>子元件往外傳遞資料：
for="item of list"
:item=item>
//data中：
return
效果：
Vue插槽slot使用
子元件 child1 此時插槽區域內顯示文案hello 父元件 hello用途 讓內容顯示到元件內的指定位置 子元件 child1 顯示預設的插槽 會顯示v slot為content的內容 parent 預設插槽使用default做引數 哈哈哈 具名插槽使用插槽名做引數 具名插槽 用途 讓內容成為某...
vue使用插槽slot
vue中使用slot插槽 父元件 插槽的使用 父元件 父元件接受子元件的資料 child slot header 我是頭部 template footer 我是底部 template 你好我是底部元件 div slot use 子元件的內容 slotcontainder 我是子元件 div 子元件的...
Vue插槽slot的使用
vue官方文件中關於slot插槽的說明很簡短，語言又寫的很凝練,這就有可能造成初次接觸插槽的開發者容易產生 算了吧，回頭再學，反正已經可以寫基礎元件了 的想法，於是就關閉了vue的說明文件。q 假如父元件需要在子元件內放一些dom元素，那麼這些dom是顯示呢還是不顯示呢？預設情況下是不會顯示的，如下...