## 組件基本定義方法 ``` <style lang='less'> </style> <template> <div> <height-camera :isOpen="face_shows2" @ret-fun="retFun"></height-camera> <span>{{sum}}</span> </div> </template> <script> import { mailList } from '@/api/eventlist' import HeightCamera from '_c/height-camera' export default { components: { // 頁面用到的組件 HeightCamera }, props:['a','b','c'], data () { // 頁面的變量定義 return { face_shows2: true } }, computed: { // 計算屬性 sum () { return 100 } }, methods: { // 頁面里面用到的所有函數 fun1 () {}, fun2 (data) { this.$emit('ret-fun', data) } }, mounted () { // 初始化的js代碼 mailList().then(ret => {}) // 調用接口 } } </script> ```