一.组件基础
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父组件的事件处理函数执行,处理对应的业务