VUE2快速入门(四)---组件基础用法

àì夳堔傛蜴生んèń 2022-12-24 10:49 83阅读 0赞

### 组件与插槽 ###

*  组件
 *   *  声明组件
     *   *  在HTML中
         *  在VUE项目中
         *   *  声明
             *  使用
     *  Prop传值
     *  监听组件事件
     *  使用场景
 *  下期

> 全球疫情地图(点击可进入中国地图)上传github 点击[地址][Link 1]  
> 因为翻译问题部分国家数据未能渲染，可以对个别国家的名字手动翻译  
> 实现 [文章入口][Link 2]  
> 在线地址: [点击进入][Link 3]

# 组件 #

自己定义一个模板元素

## 声明组件 ##

### 在HTML中 ###

app.component()

这种方法为全局注册

<div id="app">
    			<button-my></button-my>	
    </div>
    const app = Vue.createApp({})
    			
    			app.component('button-my',{
    				data(){
    					return {
    						count: 0
    					}
    				},
    				template:`<button @click="count++">点击增加count</button>
    				<div>count = {
       { count }} </div>`
    			})
    			
    			app.mount('#app')

![在这里插入图片描述][20201127213400104.png]

### 在VUE项目中 ###

如果在vue项目中

#### 声明 ####

![在这里插入图片描述][20201127213812398.png]

<template>
      <div>
          <button @click="count++">点击增加count</button>
          <div>count = {
       { count }}</div>
      </div>
    </template>
    
    <script> export default { name: "button-my", data() { return { count: 0 }; } }; </script>
    
    <style scoped></style>

#### 使用 ####

<template>
        <div>
            <button-my></button-my>
        </div>
    </template>
    
    <script> import ButtonMy from "../components/button-my"; export default { name: "Tests", components: { ButtonMy} } </script>
    
    <style scoped> </style>

![在这里插入图片描述][20201127214100931.png]

## Prop传值 ##

改造刚才的组件

<template>
      <div>
        <h2>{
       { title }}</h2>
        <button @click="count++">点击增加count</button>
        <div>count = {
       { count }}</div>
      </div>
    </template>
    
    <script> export default { name: "button-my", data() { return { count: 0 }; }, // eslint-disable-next-line vue/no-dupe-keys props: ["title"] }; </script>

在使用它的地方传值

<button-my title="I,dog"></button-my>

![在这里插入图片描述][20201127214942439.png]

## 监听组件事件 ##

子组件这样写  
changeText()函数里面的emit会接受父组件的changeTexts触发  
详细看下面的父组件

<template>
      <div>
        <h2>{
       { title }}</h2>
        <button @click="count++">点击增加count</button>
        <div>count = {
       { count }}</div>
          <button @click="changeText">改变标题</button>
      </div>
    </template>
    
    <script> export default { name: "button-my", data() { return { count: 0 }; }, methods: { changeText() { this.$emit("changeTexts"); } }, // eslint-disable-next-line vue/no-dupe-keys props: ["title"] }; </script>
    
    <style scoped></style>

父组件

<template>
      <div>
        <button-my :title="text" @changeTexts="(text='我是狗')"></button-my>
      </div>
    </template>
    
    <script> import ButtonMy from "../components/button-my"; export default { name: "Tests", components: { ButtonMy }, data(){ return{ text:"I,dog" } } }; </script>
    
    <style scoped></style>

![在这里插入图片描述][20201127220747574.gif]

## 使用场景 ##

插槽和动态模板

一个组件多次使用，比如  
所有页面的弹窗都用到这个组件 只是动态改变了弹窗内容  
详细见下篇 插槽的使用  
![在这里插入图片描述][20201127221051395.gif]

# 下期 #

插槽的使用

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 4] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[Link 1]: https://github.com/dmhsq/echartsMap-epidemic/tree/dmhsq-patch-1/map
[Link 2]: https://blog.csdn.net/qq_42027681/article/details/110049184
[Link 3]: http://www.zczyp.top/
[20201127213400104.png]: /images/20221120/9e9d1c6792d64185b6b1f2f6a3f23539.png
[20201127213812398.png]: /images/20221120/3f6c8e6947824cd3a7da1fb3b3a0243d.png
[20201127214100931.png]: /images/20221120/95a23d11e1ce4d91a75d55500a15028f.png
[20201127214942439.png]: https://img-blog.csdnimg.cn/20201127214942439.png
[20201127220747574.gif]: https://img-blog.csdnimg.cn/20201127220747574.gif
[20201127221051395.gif]: https://img-blog.csdnimg.cn/20201127221051395.gif
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: https://img-blog.csdnimg.cn/20201110144238980.gif#pic_center
[Link 4]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201118225427296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center