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

="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...