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