原生小程序小话题——自定义组件3

继续看一下小程序的内容

第一部分 组件间关系

---

我觉得这部分还挺重要的，这一部分涉及如下的这样一种关系的通信，也就是组件嵌套之间的通信

<custom-ul>
  <custom-li> item 1 </custom-li>
  <custom-li> item 2 </custom-li>
</custom-ul>

1.基础写法

这里我们创建两个组件

com-ul

<view>
  <view>father</view>
  <ul>
    <slot></slot>
  </ul>
</view>

后期com-li会放在这个slot里面，

com-li组件

<view>
  <li>son</li>
</view>

然后在两个组件之间指定父子关系

com-ul.js

就是在Component大对象之中写下这样的代码  
relations:{
    "/components/com-li/com-li":{
      type:"child",
      linked(target){
        // 这个target就是上面的com-li
        console.log("ul");
      }
    }
  },

其中那个字符串开头的key一定要注意，我这边采取的是绝对路径的写法，测试了很多遍，很多网页搜索的内容只是照抄官网，实际上并没有搞懂

com-li.js

  relations:{
    "/components/com-ul/com-ul":{
      type:'parent',
      linked(target){
        // 这里的target就是com-ul
        console.log("li");
      },
      unlinked(){
        console.log("li从ul当中解除");
      }
    }
  },

上面的这段代码的意思，就是"/components/com-ul/com-ul"这个路径代表的组件就是我本身组件的父组件，linked和unliked分别对应着生命周期函数，具体可以看官网如下的定义

在主页面上把这两组件组合一下，同时写一个按钮来控制一个com-li的消失，看申明周期能否触发反应

<com-ul>
<com-li></com-li>
<com-li wx:if="{{flag}}"></com-li>
</com-ul>
<button type="primary" bindtap="hideli">取消一个li</button>

 结果

 成功

2.关联一类组件

这个功能我测试了比较长的时间，并不能得到一个满意的结果，所以我选择跳过，但是我感觉这应该会是一个比较重要的部分，我应该会在后期搞一下

第二部分 纯数据字段

---

指的定义在Component对象或者某些特征的仅在组件内部使用的变量，采用下面的方式定义（官网上的例子）

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },
  methods: {
    myMethod() {
      this.data._b // 纯数据字段可以在 this.data 中获取
      this.setData({
        c: true, // 普通数据字段
        _d: true, // 纯数据字段
      })
    }
  }
})

这样的变量是不能通过{{}}的形式在wxml上面被拿到的，具体可以看一下下面的展示

data:{
_b:true
}

页面上这样的方式是拿取不到的
<view>{{_b}}</view>

实际上有点类似一个私有属性，另外私有属性可以作为组件props的key名

Component({
  options: {
    pureDataPattern: /^_/
  },
  properties: {
    a: Boolean,
    _b: {
      type: Boolean,
      observer() {
        // 不要这样做！这个 observer 永远不会被触发
      }
    },
  }
})

作为props时，其监听可以使用以前文章提到的observers大对象进行监听，此外纯数据字段的正则还可以在json当中进行设定

{
  "pureDataPattern": "^_"
}

第三部分 抽象节点 

---

对我来说，抽象节点更像一种穿透，他能让我们在父组件之中处理需要插入的子组件，但是其子组件又不是以slot的方式插入，而是通过标签上指定的抽象节点的方式，有点像是react的reder props，我们来看一个例子吧

首先设置一个父组件，并在其json当中允许抽象节点

<view>
<view>抽象父组件</view>
<selectable></selectable>
</view>

json，添加一下这个字段

"componentGenerics": {
    "selectable": true
  }

这个<selectable></selectable>标签指的就是这个抽象子组件

我创建了两个子组件，分别是

<view>father,i am son</view>

<view>父亲，我是孩子啊</view>

看一下挂载

<com-test7 generic:selectable="son2"></com-test7>
<com-test7 generic:selectable="son1"></com-test7>

通过了generic：selectable进行插入，结果如下

 貌似不能插入多个啊

基本上基础就是这个样子了，接下来话应该是对细节的补充或者，按照场景来学习一些较小的更细微的内容