VUE2快速入门(四)---组件基础用法
组件与插槽
全球疫情地图(点击可进入中国地图)上传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：推荐不温卜火 一定要看哦
一些插件的使用等
大学之道亦在自身，努力学习，热血青春
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/11/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
