全球疫情地图(点击可进入中国地图)上传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
有问题可以下方留言，看到了会回复哦