微信小程序 自定义组件 父子组件传 class

我是搞APP的，但是最近APP的业务不多了，公司便让我去搞微信小程序。。一万个草泥马飞过。。。

有时候我们有这一种需求：在使用组件的时候，我们希望子组件的某些样式由父组件来控制，比如导航栏-navgationbar的背景，我可以使用图片，也可以使用css指定，这样是不是非常方便？

因为导航栏默认的太丑，所以，我自定义了导航栏的显示组件。前提是隐藏了默认的导航栏。

整个实现过程如下：

第一步：

为子组件增加：externalClasses: ['bar-background-css']，注意不是在properties里面增加 。而是平行于properties来增加。

[]里面就是你要接收父组件传过来的class样式。这里非常恶心的一点：[]不能出现鸵峰式的命名。你把bar-background-css改为barBackgroundCss特么的就无效了，起不了作用。读者朋友可以自行尝试看一下效果。

第二步：

在子组件的页面文件，即wxml文件中，对使用此样式的dom增加class="bar-background-css",至此，整个子组件的修改或者说牵扯到的文件就已经修改完毕。

第三步：

父页面的调用：一定要将子组件在父页面的json文件中注册。注意写法是""而不是"{{}}".

在父页面的样式文件即wxss文件中定义bar-bg-view样式。

经过以上三步，就已经增加完毕了。现在我们来看看运行效果。颜色为red。

颜色为过渡色，再看看。

至此结束。阅读愉快。