11.vue3组件化开发(父子组件之间的通信)

phoebemeng

已于 2022-09-01 10:58:55 修改

阅读量468

点赞数

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

于 2022-09-01 10:46:10 首次发布

本文链接：https://blog.csdn.net/phoebemeng/article/details/126603565

版权

本文介绍了Vue3中组件的嵌套、拆分以及CSS作用域，重点讲解了父子组件之间的通信方式，包括通过props从父组件向子组件传递数据，以及使用$emit从子组件向父组件发送事件。同时，通过商品栏切换案例展示了实际应用场景。

摘要由CSDN通过智能技术生成

1、组件的嵌套

利用脚手架创建一个项目。vue create 项目名

如果将所有逻辑都放在一个组件中，这个组件就会变得非常臃肿和难以维护。
组件化的核心思想是对组件进行拆分，再将这些拆分的组件嵌套在一起，最终形成应用程序。

2、组件的拆分

app：Header 、Main、Footer
Main： Banner、ProductList
各个部分还可以进行细化拆分。
拆分后开发对应的逻辑只需要去对应的组件编写就可。

<template>
<div id="app">
	<headert></headert>
	<Maint></Maint>
	<footert></footert>
</div>
</template>

<script>
	// 导入三个组件
	import Headert from "./Headert.vue";
	import Maint from "./Maint.vue";
	import Footert from "./Footert.vue";
	export default{
		data() {
			return{
				
			}
		},
		// 注册组件
		components : {
			Headert,
			Maint,
			Footert
		}
	}
</script>
<!-- scoped使得当前组件中的样式对于外部不产生影响 -->
<style scoped>
</style>

3.组件的CSS作用域

通过scoped防止组件与组件之间的样式污染。

<template>
	<h2>Vue</h2>
	<hello-world></hello-world>>
</template>

<script>
	import HelloWorld from "./HelloWorld.vue"
	export default {
		components : {
			HelloWorld
		}
	}
</script>

<style scoped>
	h2{
		color: pink;
	}
</style>