本文介绍了Vue组件的基础知识，包括组件的定义、复用、扩展和维护性优势。详细阐述了组件的全局与局部注册，以及如何在模板中使用组件。此外，讲解了`scoped`属性在CSS中的作用，确保样式仅对当前组件生效。最后，讨论了Vue中父子组件的通信方式，包括props的单向数据流和自定义事件的使用，帮助理解组件间数据流动的规范和实践。
一.组件基础
1.其是什么，好处：是一个可复用的Vue实例，里边儿封装了HTML、CSS、JS
好处：相互独立、复用性、扩展性、可维护性高。
2.如何使用：#1封装组件：一个Vue文件就是一个组件 #2引入组件
#3注册组件：
1全局注册（在 main.js 中注册，注册后所有地方都可以使用，Vue.component(组件名，组件对象)）
2局部注册（在要使用的组件中注册, 只能在当前组件中使用。components: {
组件名: 组件对象
}）
#4使用组件：组件名作为标签名使用即可
二.scoped
1.其作用：让 style 中的所有样式只针对当前组件标签生效
2.原理：给当前组件所有标签添加一个 data-v-hash 的属性，给所有选择器添加一个交集的属性选择器[data-v-hash]
<style lang="scss" scoped>
</style>
三.组件通信
#1父传子
1.1用法：在子组件中使用props定义变量准备接收，在父组件中使用属性传递数据
1.2注意事项：单项数据流（1.Vue 为了让我们数据流向更清晰, 不允许在子组件中修改父组件传递的数据, 如果不小心修改了, 父组件不会收到更新, 同时还会报错。2.父组件传递给子组件的数据, 只能由父组件修改, props 的数据都是只读的）
#2子传父用法：
2.1在父组件中给子组件绑定自定义事件，
2.2在子组件中恰当的时机触发事件，并携带数据
2.3父组件的事件处理函数执行，处理对应的业务
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
