0
点赞
收藏
分享

微信扫一扫

VUE 组件

攻城狮Chova 2022-02-18 阅读 69

一.组件基础

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

举报

相关推荐

0 条评论