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

資料型態

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
        }

內傳外