父子元件是元件之間的一種關係，這個關係並不是絕對的，而是相對的。通常，如果在a元件中使用了b元件，那麼就稱a元件為b元件的子元件，相應地，b元件就稱為a元件的子元件。
>
>
>
b>
div>
template
>
>
/* 在工程化專案中，元件想要使用某一元件，有三個步驟：
1、引入
2、註冊
3、使用
*/// 1、引入子元件
import
bfrom
'./child.vue'
;export
default},
components:};
// b元件被引入到元件a中，那麼a、b元件之間的關係就叫父子元件，其中a是b的父元件，b是a的子元件
// 這個關係是相對的，不能直接說a是父元件，b是子元件，因為每乙個元件都有可能是別的元件的父元件或者子元件。
script
>
插槽，是vue的乙個內建元件，代表的內容就是父元件在使用該元件時，直接寫在元件標籤中的內容，例如 哈哈插槽的使用
一般父元件使用某一子元件時，是直接寫 《子元件》>
>
>
我是子元件例項1b
>
>
我是子元件例項2b
>
div>
template
>
>
/* ！注意：父元件中每使用一次b，就會建立乙個vue例項，只是它們用了同乙個模板而已，並不代表它們也使用同一套資料
*/import
bfrom
'./child.vue'
;export
default},
components:};
script
>
具名插槽普通插槽能讓父元件決定子元件最終渲染什麼內容，但是卻不能將顯示的內容進行精準劃分。比如：子元件的結構分為 標題 和 正文，那麼父元件怎麼把內容傳過去讓子元件知道哪部分是標題，哪部分是正文呢？這就需要用到具名插槽了。>
>
>
>
slot
>
h1>
div>
template
>
>
/* 使用了內建元件 slot，那麼渲染的具體內容由其父元件來決定。所以通常 **slot** 是寫在那些一開始就被確定是作為子元件使用的元件中
*/export
default},
};script
>
具名插槽：就是給 slot 取乙個自定義名字，即在中新增乙個name行內屬性。使用的時候，指定內容是哪個name的 slot 即可。
// 子元件-->b
>
>
>
name
="title"
>
我是預設值，如果父元件不給我傳值，那就顯示我slot
>
name
="context"
>
我是預設正文，父元件不傳值給我，我就顯示slot
>
>
我是無名插槽預設值slot
>
h1>
div>
template
>
>
>
>
slot
="title"
>
我是titlep
>
slot
="context"
>
我是正文p
>
我的沒有指定插槽名的內容，我會取代無名插槽的預設值
b>
>
v-slot:default
>
取代預設值template
>
#title
>
>
我是簡寫p
>
template
>
b>
div>
template
>
>
/* ！注意：父元件中每使用一次b，就會建立乙個vue例項，只是它們用了同乙個模板而已，並不代表它們也使用同一套資料
*/import
bfrom
'./child.vue'
;export
default},
components:};
script
>
vue元件中的插槽使用
vue 2.6.0之後採用全新v slot語法取代之前的slot slot scope 插槽的目的是讓元件能後更好的進行擴充套件，使用起來更靈活故而言之就是插槽指定名稱，預設為default comp div parent hello comp 渲染出來的結果為 hello 也就是將slot的標籤包...
Vue元件插槽
三 具名插槽 命名插槽 補充當我們使用vue元件時，常常遇到子元件的部分布局在不同的路由元件上表現不同的情況，vue為了幫助我們開發者解決這個問題，新增了插槽這個功能 插槽即佔位符 實現元件在不同父元件中使用，內部可以有不一樣 塊 html 如下 示例 如下 示例 當乙個子元件內，需要多個插槽時，需...
Vue 元件的插槽
元件的插槽 示例 p 總消費量 p tan v bind name name v on tank add 可以為插槽起名 span slot haha 哈哈哈！span span slot heihei 嘿嘿嘿！span tan 第二種替換方式 tan v bind name name v on t...