VUE3.0學習系列隨筆（五）：自定義元件使用

阿新 • • 發佈：2021-01-26

技術標籤：VUE3.0學習隨筆 VUE2.0學習隨筆 vue html html5

VUE3.0學習系列隨筆（五）：自定義元件使用

VUE2.0和VUE3.0雖然在工程目錄結構上存在較大差異，但是具體的程式碼實現邏輯相同，本文所使用的自定義元件方法，同樣適用於VUE2.0。

1、無參子元件的自定義和呼叫

（1）定義無參子元件

自定義元件已辦存放在VUE工程結構的component資料夾下，新建自定義元件的方式和新建普通vue檔案一樣，整個VUE程式碼結構，本文自定義head元件，主要是作為頁面的頂部div使用，程式碼如下：

<template>
  <div class="head" 
>
    <span>我是子元件</span>
  </div>
</template>

<script>
export default {
  name: 'Head'
}
</script>

<style scoped>
.head{
  width: 100%;
  height: 100px;
  background-color: aqua;
}
</style>

（2）呼叫無參子元件

自定義元件的呼叫有兩種方式：全域性呼叫和區域性呼叫。
全域性呼叫適用於整個專案工程，區域性呼叫只適用於當前vue檔案

a、全域性呼叫

全域性引用自定義元件需要在main.js中進行申明和引用，在main.js中引用程式碼為：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import head from '@/components/head.vue'
createApp(App).use(router).use(store).use(router).component(head.name, head).mount('#app')

父元件在使用全域性呼叫子元件時，需要注意子元件標籤<Head></Head>要和子元件引數中的name值一致，否則會呼叫失敗，程式碼：

<template>
  <div class="home">
    <!--使用全域性自定義元件-->
    <Head></Head>
    <span>我是主要部分</span>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 500px;
  background-color: antiquewhite;
}
</style>

注意：由於本文使用的VUE3.0工程的預設變數定義如下，所以只能在`createApp(App)`的後面新增引用，通用的程式碼方式為：

import Vue from 'vue'
import App from './App.vue'
import head from '@/components/head.vue'
Vue.component(head)

b、區域性呼叫

區域性呼叫需要先引入元件程式碼import Head from '@/components/head.vue'，然後在父元件中進行申明，程式碼為：

<template>
  <div class="home">
    <!--使用自定義元件-->
    <Head></Head>
    <span>我是主要部分</span>
  </div>
</template>

<script>
// 區域性引入自定義元件
import Head from '@/components/head.vue'

export default {
  name: 'Home',
  // 區域性引入自定義元件
  components: {
    Head
  }
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 500px;
  background-color: antiquewhite;
}
</style>

子元件呼叫效果為：
在這裡插入圖片描述

2、有變數的子元件定義和呼叫

（1）定義有變數的子元件

有參子元件的定義和普通帶普通變數的VUE檔案定義一樣

<template>
  <div class="head">
    <span>{{msg}}</span>
  </div>
</template>

<script>
export default {
  name: 'Head',
  data () {
    return {
      msg: '我是頭部'
    }
  }
}
</script>

<style scoped>
.head{
  width: 100%;
  height: 200px;
  background-color: aqua;
}
</style>

（2）有變數的子元件的呼叫

在呼叫有變數的子元件的時，需要在子元件標籤中定義指向ref，即<Head ref='Head'></Head>，引用變數的方式為this.$refs.Head.msg，同時也可以進行修改，以區域性呼叫元件為例：

<template>
  <div class="home">
    <Head ref='Head'></Head>
    <span>我是主要部分</span>
  </div>
</template>

<script>
import Head from '@/components/head.vue'

export default {
  name: 'Home',
  components: {
    Head
  },
  mounted () {
    alert(this.$refs.Head.msg)
    this.$refs.Head.msg = '正在呼叫子元件'
  }
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 500px;
  background-color: antiquewhite;
}
</style>