Vue3父傳子props（組件之間通信）

在使用組件通信時我們先看一張圖

 

 看完后就知道使用父傳子時要用到props，現在就開始使用在vue里創建一個父組件，和一個子組件

 父組件傳值

在父組件App.vue里先導入子組件

 

 然后注冊

 

 

 

然后再 template 直接使用

<template >
    <div>
        <MyMain>
        </MyMain>
    </div>
</template >

如何傳值

在子組件名里直接使用

<template >
    <div class="content"> 
          <MyMain msg='hello'     //：props名字 ='值'

:title="msg"
                  :article='article'>
          </MyMain>
        </div>
</template >

直接取data里的值，也可直接寫值如 msg='hello' 

 

 子組件接收值

在MyMain 組件里使用props接收父組件傳過來的值並定義屬性類型

在類型為數組里,如果要使用default時可直接使用default:['我','是','大','帥','批']

 

 

 隨后直接使用即可,如果要往孫傳值可以像父傳子一樣繼續往下傳