Uni-app 自定义组件开发

忘是亡心i 2023-02-14 15:51 13阅读 0赞

# **\*场景\*** #

今天开发的时候遇到一个问题，小程序扫普通二维码进来通过参数判断显示不同的页面。但是又不能有跳转的效果。

思考了半天都没有找到合适的办法，后面前端的同事突然和我说可以用组件开发，把要跳转的页面做成组件，通过条件判断来显示隐藏不同的组件来实现这样的效果。嗯，说干就干

# \*创建组件\* #

我这是把之前做好的页面转换成组件。其实也不是转换只要添加几句代码就行

1.给组件取个名字：添加 name 属性

2.用来传递的参数变量

props: {
    	Bindexcode: {
    		 type:Object,//多种类型随意搭配
    		  value: null
    	}
    },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70][]

那么问题来了组件页面内怎么取值呢？其实很简单（**这里要提一下 引入的组件生命周期改变了。不能用 uni-app的 onLoad 这些事件了，要用Vue的生命周期了比如created [更多事件点击这里查看][Link 1]**）

this.Bindexcode

和在data里定义的一样用

# \*引入组件\* #

创建好组件后就要开始使用了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70 1][]

就是这么简单，用 import 引入 然后用 components注册就OK 了

上面用法就和普通标签一样的用法。给组件传值只需要 用动态绑定就OK了，我这里定义的 Bindexcode 然后绑定要转的值 code就搞定了。

# \*彩蛋\* #

上面就已经可以正常使用组件了，但是我遇到了一个问题，就是两个组件中 样式 class 我有用到相同的名字，这就麻烦了。发生冲突了，但是我又不想去改每个class 咋办呢？

于是我发现了这个

没错 就是 scoped ，只要在每个组件的 style 上加上 这个就可以 样式隔离了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200603184017255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz,size_16,color_FFFFFF,t_70
[Link 1]: https://cn.vuejs.org/v2/guide/instance.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200603184604147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz,size_16,color_FFFFFF,t_70