七，组件的传值

一,插槽

1.1单个插槽

默认每个自定义组件只允许使用一个<slot>占位

image.png
image.png

1.2多个插槽

需要在自定义组件中的js文件中配置多个插槽的

Component({
  options:{
    //启用多个slot
        multipleSlots:true
  },
})

需要定义name名字 然后在wxml中使用属性 slot="定义的名字"

二,父子组件间的通信

2.1属性绑定

父组件向子组件的指定属性设置数据(只能设置json兼容的数据)

父传子
在子组件的js中定义这个的属性

 properties: {
  num:Number
  },

绑定属性

子组件方法改不了父组件的数据.如果想同步的话需要用事件绑定

2.2事件绑定

子组件向父组件传递的数据,可以传递任意数据
1.首先在子组件中绑定一个方法

<my-test2 num="{{num}}" bind:sync="syncNum"></my-test2>

//子组件触发自定义事件将值传给父组件
 this.triggerEvent('sync',{value:this.properties.num})

//父组件接收并修改值

 syncNum(e){
      this.setData({
         num:e.detail.value
      })
     
    }

2.3获取组件实例

父组件可以通过this.selectComponent('.class or #id')获取子组件的实例

然后可以通过实例来控制子组件的数据和方法

 getChild(){
      const child = this.selectComponent('.a1');
      child.setData({
       num: this.properties.num +=2
      })
    }

三,behaviors

用于实现组件间代码共享的,类似vue中的mixins

每个behavior都包含属性,数据,生命周期和方法,每个组件可以引用多个behavior.

简单来说,behavior也就是一个组件,就是将重复且共用的代码放在behavior中,那个组件用就去调用behavior

behavior

1.创建behavior

使用

2.使用behavior

//1.导入
const myBehavior = require('../../');
Component({
//2.挂载
behaviors:[myBehavior],
})

behavior中使用的节点

可用节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其他 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

四,使用npm包

• 1. 不支持依赖于 Node.js内置库 的包
• 2. 不支持依赖于 浏览器内置对象 的包
• 3. 不支持依赖于 C++插件 的包

4.1vant weapp

https://youzan.github.io/vant-weapp/#/home

安装vant是通过npm来完成的
1 npm init -y
2 npm i @vant/weapp@1.3.3 -S --production

{
    "setting": {
        "packNpmManually": true,
        "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./"
            }
        ],
    },
}

使用 在app.json中

{
    "usingComponents": {
        "van-button": "@vant/weapp/button/index"
    },
}

定义和使用 CSS 变量

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

定制 Vant 全局主题样式

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less