Uni-app 自定义组件开发

*场景*

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

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

*创建组件*

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

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

2.用来传递的参数变量

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

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

this.Bindexcode

和在data里定义的一样用

*引入组件*

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

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

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

*彩蛋*

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

于是我发现了这个 

<style scoped>
@import url("/static/Bindex.css");
</style>

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