vue傳值方式以及會話儲存資料以及新slot的使用

2021-10-01 12:14:24 字數 1911 閱讀 7111

="about"

>

this is an about page<

/h1>

}<

/h3>

}-->

new=

"">

}<

/template>

<

!-- 簡用方式#demonew 也就是v-slot:

demonew

(這個是插槽名) demodata是資料加了的話就是傳入的值--

>

"">

}<

/template>

<

/childabout>

<

/div>

<

/template>

// 引入元件

import childabout from

'./childabout'

// 預設匯出元件

export

default

,// 存放 資料

data:

function()

},// 存放 方法

methods:},

// 存放 過濾器

filters:

,// 自定義 私有指令

directives:

,// 存放 子元件

// 注意: 元件中的 所有 props 中的資料,都是通過 父元件傳遞給子元件的

// props 中的資料,都是唯讀的,無法重新賦值

// props: , // 把父元件傳遞過來的 parentmsg 屬性,先在 props 陣列中,定義一下,這樣,才能使用這個資料

/* 生命週期函式 */

// 建立期間

beforecreate()

,// 一般頁面載入時請求後台資料(axios)

created()

,beforemount()

,mounted()

,// 執行期間(也就是事件過後改變資料等等)

beforeupdate()

,// 資料更新

updated()

,// 銷毀時期

beforedestroy()

,destroyed()

}<

/script>

<

!--scoped是在這個元件才能使用的樣式--

>

<

/style>

"main"

>}--

----

----我是子元件

}"childtoparentsdata"

>子傳父的值<

/button>

"old"

>我是預設slot的內容<

/slot>

<

!-- 包括具名插槽 繫結的動態的值--

>

"new"

:slotdata=

"slotdata"

>

}-->

<

/slot>

"demonew"

:demodata=

"demodata"

>

<

/slot>

<

/div>

<

/template>

export

default

, data:

function()

},// 存放 方法

methods:,}

,}<

/script>

<

/style>

總結:很多東西不用真的容易忘,**這個東西多看多敲防止忘了(畢竟學得東西太多了)。

Vue傳值方式

1.provide和inject實現祖先與後代元件傳值 祖先元件 export default provide 後代元件 export default 2.props實現父向子傳值 父元件 zhnagsan age 2 子元件 export default 3.emit實現子元件傳資料給父元件 子元...

Vue傳值方式

父傳子 1.1父元件準備資料 1.2給子元件註冊定義屬性 1.3子元件用props接收資料 注意 這裡我監聽了 父元件的值 子傳父 2.1 子元件準備資料 this.cstcde和thi.danme已經在子元件data中定義好了 2.2 子元件需要觸發自定義事件,觸發事件傳遞引數 confirm就是...

Vue學習(三) 父子元件以及傳值方式

vue父子元件及其傳值。最樸素的理解 父與子有血緣關係,父親向兒子傳遞資訊是通過基因傳遞的,基因即父親的props 屬性 在這個屬性欄位中需要定義好要傳遞的引數的型別,這種情況下只要父親變了兒子自然變了。預設父親的所有屬性兒子都有。舉例 submenue.vue sidermenue.vue ite...