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

组件

自己定义一个模板元素

声明组件

在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')

在VUE项目中

如果在vue项目中

声明

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

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>

监听组件事件

子组件这样写
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>

使用场景

插槽和动态模板

一个组件多次使用，比如
所有页面的弹窗都用到这个组件 只是动态改变了弹窗内容
详细见下篇 插槽的使用

下期

插槽的使用

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

未经本人允许，禁止转载

后续会推出

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

大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910

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