第12课 微信小程序Component构造器自定义组件：

第12课 微信小程序Component构造器自定义组件：

1.自定义创建组件：

2.在组件的my-component.json文件声明组件

my-component.json全部代码：

{
  "component": true,
}

3.设置组件的my-component.js代码：

my-component.js全部代码：

Component({
  externalClasses: ['user-class'],  //设置外部传递class类名
  properties: {
    // 这里定义了属性名，属性值可以默认 也可以在组件使用时传入
    username: {
      type: String, //定义传值的类型
      value: '用户名',  //初始值
    },
    sign: {
      type: String, //定义传值的类型
      value: '这家伙很赖，什么也没写！',  //初始值
    },
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () { }
  }
})

4.设置组件的my-component.wxml代码：

my-component.wxml全部代码

<!-- 这是自定义组件的内部WXML结构 -->
<view class="user-class">
用户：{{username}}
</view>
<view class="inner">
个性签名：{{sign}}
</view>
<!-- 这是组件的自定义插槽 用来接收页面引入组件时 对组件里面增加的标签-->
<slot></slot>

5.定义组件样式的my-component.wxss代码：

my-component.wxss全部代码

/* 这里的样式只应用于这个自定义组件 也可以通过设置隔离修改*/
.inner {
  color: red;
}

下面是引用自定义组件的index页面代码：

index.js全部代码 //这里面不用写代码 默认就行

const app = getApp()
Page({
  data: {
  },
  onLoad: function () {
  },
})

index.json全部代码 //注册引入的组件路径，注册后才能引入组件

{
  "usingComponents": {
    "my-component": "/components/my-component"
  }
}

通过对username传值而不对sgin传值做对比

通过外部设置css样式传入class名改变组件样式效果

index.wxml全部代码

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <!-- 通过对username传值而不对sgin传值做对比 -->
  <!-- 通过外部设置css样式传入class名改变组件样式效果 -->
  <my-component username="小明" user-class="userclass">
    <!-- 这个button标签被组件内写好的插槽接收 -->
    <button >点击签到</button>
  </my-component>
</view>

以下是index.wxss样式代码：

index.wxss全部代码

.userclass{
  color: green;
}

运行效果图如下：

可见通过外部index页面wxss引入的样式在组件内起作用了！