VUE3.0学习系列随笔（五）：自定义组件使用

Love The Way You Lie 2023-01-11 01:15 196阅读 0赞

### 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中进行申明和引用  
VUE3.0，在main.js中引用代码为：

import {  createApp } from 'vue'
    import App from './App.vue'
    import Head from '@/components/head.vue'
    
    const Vue = createApp(App)
    
    Vue.component('Head', Head)
    Vue.mount('#app')

VUE2.0，在main.js中引用代码为：

import Vue from 'vue'
    import App from './App.vue'
    import Head from '@/components/head.vue'
    
    Vue.component('Head', Head)
    
    new Vue({ 
    	render: h => h(App)
    }).$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>

##### 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>

子组件调用效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]

#### 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>

调用子组件的效果为：  
![在这里插入图片描述][20210125165548121.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221119/e5828166a1ff4e5b86cd883c92c30f91.png
[20210125165548121.gif]: /images/20221119/928a5886e3184c76a137edc0878d22e7.png