# Vue 元件
###### tags: `Vue`
DATA:2022/06/06

## 架構

//第一部分
<div id="app">

        //放的東西
    <AAAAA></AAAAA>
    
</div>

//第二部分
<!-- 元件結構 <script id="aaaaa" type="text/x-template"> HTML 內容 </script>  -->
<scrit id="AAAAA" type="text/x-template"> 
    
    <!--HTML內容-->
    
</scrit>


//第三部分
<script>

  const { ref, reactive } = Vue
  
  Vue.createApp({
    setup() {}
  })

    // .component(零件) 註冊一個元件給 Vue ，元件名稱通常與 id 相同 ，但第一個字是大寫避免衝突。

    // .component('元件名稱', {
    .component('AAAAA', {
      // 綁定上面的元件
      template: '#aaaaa',

      // 語法一樣 ， setup()
      setup() {
        
        return {
          
        }
      }
    })
    .mount('#app')
</script>

##### 範例可看 card2.html / counter.html
:::info
資料型態

|String|字串|
|-|-|
int|整數
float|小數
array|陣列
object|物件
bool|布林
number|數字

:::

- 預設

 default(){
     return 0 
          }

## toRef / toRefs
以下三種方法結果都相同

方法一

        // toRefs 全部解構拉出來
        const { text, img } = toRefs(props)

        const alertInfo = () => {
          // 解構後的寫法
          alert(text.value+ '\n'+ img.value)
        }

        return{
          alertInfo
        }

方法二

        // toRef 一個一個解構
        const img = toRef(props,'img')
        const text = toRef(props,'text')
        
        const alertInfo = () => {
          // 解構後的寫法
          alert(text.value+ '\n'+ img.value)
        }

        return{
          alertInfo
        }

方法三

        const alertInfo = () => {
          // 不使用 toRefs toRef 解構，直接用
          alert(props.text+ '\n'+ props.img)
        }

        return{
          alertInfo
        }

## 內傳外