---
# System prepended metadata

title: 5.1-Vue.js元件

---

---
# 5.1-Vue.js元件
---
# 5.1-Vue.js元件





# 元件 

```html=
 <body id="app">
    Card
 </body>

<script id="card" type="text/x-template">
  <p>cardHere</p>
</script>

 Vue.createApp({中間跟上面依樣]).component('Card',{
    template: '#card'
  })

```



1.script建立單位html 
2.<元件名> / <元件名 v-for> 建立多元件
3.".component" 建立元件
4.如果要從createApp跨域給元件 需要:
1. -記得return
2. -在html大標設 :變數名="Vue變數值"
3. -在.component 增加 props:{ 變數1名: String,變數2名:Number}
4. -在單位html  參數後加上變數名 EX: :src="變數1名"
5. 如果跨域要加工:
```javascript=
setup( p ){
const { t, im, n } = toRefs( p ) 
return{ ????}
}
```