微信小程序笔记（三）自定义组件

1.创建组件：在文件夹右键单击 选择components， 写新建文件夹的名称。里面有四个文件。
2.引用组件的方式：局部：

// 自己的json文件
{
    "usingComponents": {
    "my-test1": "/components/test/test" } }

全局：

app.json文件里

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

3.组件与页面的区别：

• 组件的 .json 文件中需要声明 “component”: true 属性
• 组件的 .js 文件中调用的是 Component() 函数
• 整个程序启动调用的是 App()
• 某个页面的渲染调用的是 Page()
• 某个组件的渲染调用的是 Component()
• 组件的事件处理函数需要定义到 methods 节点中
  4.组件的样式隔离：组件鱼页面之间不会相互影响 (只有class选择器才不会影响)[id，属性，标签会影响]
  可以设置styleIsolation属性修改样式:

// 在组件的.js 文件中新增加如下配置
Component({
    
  options: {
    
   /// apply-shared: // 代表页面wxss样式将影响自定义组件 
   ///shared: // 代表双向的影响 
    styleIsolation: 'isolated'  // 默认值isolated: 代表启动样式隔离 
  } 
})
// 或在组件的.json 文件中新增加如下配置 
{
    
  "styleIsolation": "isolated" 
}

5.组件的数据属性和方法:data中定义数据，methods中定义函数和自定义方法，properties中定义组件对外属性

Components({
    
// 属性定义 
properties: 
{
    
// 完整定义 属性的方式【当需要指定属性默认值时，建议使用此方式】 
  max: {
   
// 属性值的数据类型 type: Number, 
// 属性值的默认值 
    value: 10 
  },
// 简化定义 属性的方式 
    max: Number 
  } 
})
  <my-test1 max="10"></my-test1>
  // ****************子组件*********
  /*** 组件的方法列表 */ 
  methods: {
    
    addN1 () {
    
  /*** 如果 n1 大于 max的值 ，不允许再继续增加 */ 
      if (this.data.n1 >= this.pr