vue.js组件的应用(Vite构建)

最新推荐文章于 2024-03-06 13:59:58 发布

心理患者

最新推荐文章于 2024-03-06 13:59:58 发布

阅读量1.1k

点赞数 20

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_64164071/article/details/135083728

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.组件的定义和应用

1.全局组件

全局组件是指在任何页面中不必再单独引入组件并注册，直接在模板中使用组件名称就可以引用的组件。

全局组件注册方法一

先在src目录下新建一个globalComponents文件夹，再新建一个Header.vue的全局组件。

<template>
  <div>全局组件Header</div>
</template>

<script>
export default {
  name: 'Header' //以大写字母开头的组件名称
}
</script>

进入main.js，进行全局组件的注册，代码如下：

import { createApp } from 'vue'
import App from './App.vue'

//引入全局组件Header，注意vite启动的项目引入Header的路径需要加后缀.vue
import Hearder from './globalComponents/Header.vue'

//初始化实例
const app = createApp(App)

// 使用component方法注册全局组件
app.component('Header', Hearder)

//将实例挂载到#app标签上
app.mount('#app')

注册为全局组件后，进入App.vue, 引用全局组件，代码如下：

<template>
  <div>
    <Header></Header>
  </div>
</template>
<script>
export default {}
</script>

启动项目，渲染效果如下，则渲染成功
在这里插入图片描述

全局组件注册方法二

在globalComents文件夹下新建Footer.vue

<template>
  <div>全局组件Footer</div>
</template>

<script>
export default {
  name: 'Footer' //以大写字母开头的组件名称
}
</script>

注意，name要写上，否则后续不方便定义名称

与方法一不同的是，在globalComponents下新建index.js,用于注册全局组件

import Header from './Header.vue'
import Footer from './Footer.vue'

//定义组件，将组件填入
const components = [Header, Footer]

export default {
  install (app) {
    //利用数组的foreach循环，注册全局组件
    components.forEach(item => {
      app.component(item.name, item)
    })
  }
}

修改main.js，如下

import { createApp } from 'vue'
import App from './App.vue'
import GlobalComponents from './globalComponents'//引入自定义的全局组件库

//初始化实例
const app = createApp(App)

//使用实例的use方法，传入自定义全局组件库
app.use(GlobalComponents)

//将实例挂载到#app标签上
app.mount('#app')

在App.vue脚本中，引入组件库的Header和Footer两个组件

<template>
  <div>
    <Header></Header>
    <Footer></footer>
  </div>
</template>
<script>
export default {}
</script>

运行一下，全局配置成功
在这里插入图片描述

2.局部组件

在src/components下写一个Test.vue

<template>
  <div>局部组件</div>
</template>

<script>
export default {
  name: 'Test' //以大写字母开头的组件名称
}
</script>

在App.vue中引入Test

<template>
  <div>
    <Header></Header>
    <Footer></footer>
    <Test></Test>
  </div>
</template>
<script>
// 引入Test组件
import Test from './components/Test.vue'
export default {
  components: {
    //注册Test组件
    Test
  }
}
</script>

注意，引入局部组件，其他的vue并不能直接使用该组件，上述< Test >可以用小写< test >

  components: {
    //注册Test组件
    NickTest:Test
  }

也可以用驼峰命名，使用时则用中横线

<nick-test></nick-test>

3.动态组件

Vue提供了一个关键字is，通过v-bind:is=“组件名”，修改is的组件名从而达到更换，组件的注册方法上面已经讲过了，就不举例说明了。

二，组件间的值传递

1.父子组件通信

创建Son.vue组件

<template>
  <div>我是子组件</div>
  <!-- 将父组件传进来的值展示在模板上 -->
  <div>count: {{ count }}</div>
</template>

<script>
export default {
  //定义传值的名称和类型，这里key需要和父组件传值的属性保持一致
  props: {
    count: String
  },
  setup (props) {
    //打印props属性下的count变量
    console.log("🚀 ~ file: Son.vue:14 ~ setup ~ props:", props)
  }    
}
</script>

在父组件App.vue中引入子组件，使用并传入count值，注意子组件一定要定义props属性，否则setup函数无法获取父组件的传的值

//父组件传值的方法
<Son count="1"></Son>
//其余代码同上面引入组件一样，在此省略

控制台成功打印父组件传的值
在这里插入图片描述

2.子传父

上面属于正向传递，反过来，子组件传值给父组件属于逆向传递，此时需要用emit方法，将子组件的内容返回父组件，修改Son.vue如下

<template>
  <div>我是子组件</div>
  <!-- 将父组件传进来的值展示在模板上 -->
  <div>count: {{ count }}</div>
</template>

<script>
export default {
  //定义传值的名称和类型，这里key需要和父组件传值的属性保持一致
  props: {
    count: String
  },
  setup (props,ctx) {
    //打印props属性下的count变量
    console.log("🚀 ~ file: Son.vue:15 ~ setup ~ props:", props)
    ctx.emit('callback', '子组件执行callback')
  }    
}
</script>

App.vue中添加下面代码：

<Son @callback="callback" count="1"></Son>

并添加setup函数

setup () {
    //传递给子组件返回内容的回调函数
    const callback = (val) => {
      console.log("🚀 ~ file: App.vue:23 ~ callback ~ val:", val)
    }
    return {
      callback
    }
  }

上面代码可以看出，值是在子组件中传过来，并在父组件里使用的，但实际上还是父传子，
这里是父组件用@关键字，将callback方法传递给子组件，子组件使用该回调方法，最终实现子传父。

3.兄弟组件通信

没有上下极关系，需要跨组件通信的方式，就是兄弟组件通信，虽然兄弟组件没有上下级关系，但他们会有一个共同的父组件，那么就能通过父组件为媒介，帮助两个组件通信。

分别创建Son1.vue和Son2.vue

<template>
  <div>我是子组件1</div>
  <!-- 将父组件传进来的值展示在模板上 -->
  <div>Son2传的值: {{ count2 }}</div>
  <button @click="change">传值给Son2</button>
</template>

<script>
export default {
  //定义传值的名称和类型，这里key需要和父组件传值的属性保持一致
  props: {
    //父组件定义一个count2,传值给子组件1
    count2: Number
  },
  setup (props,ctx) {
    //打印props属性下的count变量
    console.log("🚀 ~ file: Son.vue:15 ~ setup ~ props:", props)
    const change = () => {
      ctx.emit('callback', 111)
    }
    return {
      change
    }
  }    
}
</script>

<template>
  <div>我是子组件2</div>
  <!-- 将父组件传进来的值展示在模板上 -->
  <div>Son1传的值: {{ count1 }}</div>
  <button @click="change">传值给Son1</button>
</template>

<script>
export default {
  //定义传值的名称和类型，这里key需要和父组件传值的属性保持一致
  props: {
    //父组件定义一个count1,传值给子组件2
    count1: Number
  },
  setup (props,ctx) {
    //打印props属性下的count变量
    console.log("🚀 ~ file: Son.vue:15 ~ setup ~ props:", props)
    //触发父组件传递的方法
    const change = () => {
      ctx.emit('callback', 222)
    }
    return {
      change
    }
  }    
}
</script>

下面修改App.vue

<template>
  <div>
    <Son1 @callback="change1" :count2="count2"/>
    <hr>
    <Son2 @callback="change2" :count1="count1"/>
  </div>
</template>
<script>
import {ref} from 'vue'
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
export default {
  components: {
    Son1,
    Son2
  },
  setup () {
    const count1 = ref(0)
    const count2 = ref(0)
    //传递给子组件返回内容的回调函数
    const change1 = (val) => {
      count1.value = val
    }
    const change2 = (val) => {
      count2.value = val
    }
    return {
      count1,
      count2,
      change1,
      change2
    }
  }

}
</script>

简单来说，就是父组件和Son1通信，父组件和Son2通信，而通信的结果绑定在对方组件上，结果就显示为两个组件通信了。

这里还有种方式，就是事件总线（EventBus），简单介绍下，就是各组件将方法，参数都注册到一个池中，改池中的方法，参数其他组件都能获取，以此达到通信的目的，官方推荐第三发插件mitt，有兴趣的可以自行了解下。