Vue學習筆記（四）插槽 多級元件資料傳遞

八、插槽

>

我是使用者新增的內容啦啦啦<
/div>
"one"
>我是新增在插槽一中的內容啦啦啦<
/div>
"two"
>
我是新增在插槽二中的內容啦啦啦<
/div>
<
/template>
<
/cpn>
<
/div>
"cpn"
>
我是元件頭部<
/p>
//slot就是插槽
<
/slot>
"one"
>
<
/slot>
"two"
>
<
/slot>
我是元件底部<
/p>
<
/div>
<
/template>
vue.
component
('cpn',)
;let vue =
newvue()
;<
/script>

把son1的count傳遞給farther元件。在farther元件中定義乙個num和方法change()，把change()繫結給son1元件，son1元件在觸發增加 / 減少事件時向父元件傳送事件，並把count傳遞給父元件， this.$emit(『par』, this.count); 父元件中的num儲存count

在父元件中給son2傳遞儲存了count的num，:par-num=「num」，在son2元件中通過porps接收parnum(命名注意點)，這樣在son2元件中就可以使用son1中的count資料了！

>

<
/farther>
<
/div>
"farther"
>
}<
/p>
"change"
>
<
/son1>
//把count從son1傳遞給farther元件
"num"
>
<
/son2>
//把count從farther傳遞給son2元件
<
/div>
<
/template>
"son1"
>
"increment"
>增加<
/button>
"decrement"
>減少<
/button>
"text"
:value=
"count"
>
<
/div>
<
/template>
"son2"
>
}<
/p>
//使用傳遞過來的資料
<
/div>
<
/template>
vue.
component
('farther',}
, methods:},
components:},
methods:
,decrement()
}},'son2':}
});let vue =
newvue()
;<
/script>

Vue學習筆記 元件的插槽slot

插槽slot 子元件中加入標籤，父元件呼叫子元件時，雙標籤的內容，就會複製到slot中 template 插槽slot 插槽中使用子元件 父元件使用slot時，可以使用其他子元件 插槽中使用資料項 父元件使用slot時，可以使用資料項 動態資料 父元件模板裡呼叫的資料屬性，使用的都是父元件裡的資料 ...

Vue筆記（四） 插槽（slot）

插槽 slot 用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模組化的特質和更大的重用性。示例 1239 1011 1314 15for item in items v bind list item 1617 1819 2021 2252 5354 55 在上面的 中，todo的...

vue學習筆記 vue元件

元件 是頁面的一部分，將介面切分成部分，每部分稱為 元件 定義乙個全域性的元件，元件支援 駝峰命名 規則 vue.component todoitem 迴圈遍歷 list 每一次遍歷都把值給 item item 再通過 v bind 把值傳遞給 content compoent 通過 props 獲...