學習要點：
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)整理發布!
啟點CMS演示地址及賬號
