學習要點:
1.實際問題
2.數據父傳子
本節課我們來開始學習 Vue3.x 的組件中父組件給子組件傳遞數據的方法。
一.實際問題
1. 根組件(父組件)的 data()數據,子組件在目前的知識是無法獲取的;
2. 我們如果想要子組件和父組件同時正確的獲取數據,采用如下方法:
// 定義一個局部組件
const htmlA = {
// 數據
data() {
return {
message : '子組件-Vue3.x~'
}
},
// 模板
template : `
`
}
// 創建一個 Vue 應用實例,這個本身也是一個組件,根組件,最頂層的
const app = Vue.createApp({
data() {
return {
message : '父組件-Vue3.x~'
}
},
// 創建一個局部組件,也是一個子組件
components : {
'html-a' : htmlA
}
})
<div id="app">
<html-a>html-a>
div>
PS:上面的例子中暴露的問題,就是子組件無法直接使用父組件的 message 屬性;
PS:所以只能在 HTML 端進行設計,但這樣做,父組件的內容無法和子組件參與邏輯;
<div id="app">
<div>{{message}}div>
<html-a>html-a>
div>
二.數據父傳子
1. 根據上面的問題,我們最好是能夠直接從子組件獲取到父組件的數據內容;
2. 這時,Vue3.x 提供了一個 props 來獲取父組件給子組件傳遞的值;
// 定義一個局部組件
const htmlA = {
// 數據
data() {
return {
message : '子組件-Vue3.x~'
}
},
// props
props : ['abc'],
// 模板
template : `
`
}
<div id="app">
<html-a v-bind:abc="message">html-a>
div>
PS:props 里定義數組,表示可以定義多個;在 HTML 端使用 v-bind:abc 來獲取父組件對應值;
PS:這里采用了 abc 表示 props 的元素名稱可以自定義,如果定義成 parent-message,則:
props : ['parentMessage'],
// 模板
template : `
`
<html-a v-bind:parent-message="message">html-a>
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!