小程序的通信，vantweapp模块安装,以及自定义组件，slot插槽，监听observers

小程序通信：

父传子通信：
在pages/index/index.json里面有个usingComponents

{
  "usingComponents": {
    "组件的名字":"子组件的位置"// 例如../../components/com03/com03
  }
}

记住：com03后面没有.什么

在 .wxml里面引入

		  //需要传入的名字 ，记得加引号
<组件的名字 count=" {{数据}} "></组件的名字>

com03.json里面

  //接受子组件传来的数据
  properties: {
  	//上面传来的数据
    cound:{
      type:Number, //传过来的类型多类型可以用[,]
      value:0 //默认参数
    }
  },

子传父：
父 .wxml文件中

		  //自定义事件myevent,getcount是方法
<组件的名字 bind:myevent="getcount"></组件的名字>

父 .js文件中

定义方法getcount

//e是子组件传过来的数据
  getcount(e){
    console.log(e)
  },

子 .wxml文件中

	<button bindtap="getlist">点击</button>

子 . js文件中

	//通过triggerEvent进行发送，
    getlist(){
      //有需要可以在后面进行传参
      this.triggerEvent('myevent'，{age:18})
    }

vantweapp模块安装：

官网网址

首先三个安装方式

通过 npm 安装

npm i @vant/weapp -S --production

通过 yarn 安装

yarn add @vant/weapp --production

安装 0.x 版本

npm i vant-weapp -S --production

第一步：

在微信开发者这里点击使用npm 模块

第二步：
安装vantweapp模块

yarn add @vant/weapp --production

完成两步后会得到一个
第三步：
点击构造npm

使用方式：

在app.json或index.json中引入组件

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

在.wxml文件中：

	<van-button type="default">默认按钮</van-button>
	<van-button type="primary">主要按钮</van-button>
	<van-button type="info">信息按钮</van-button>
	<van-button type="warning">警告按钮</van-button>
	<van-button type="danger">危险按钮</van-button>

slot插槽

父 .wxml

<my-com03 id="getcod">
  <view slot="top">我是顶部插槽</view>
  <view>你好，我想要找工作</view>
  <view slot="button">我是底部插槽</view>
</my-com03>
<button bindtap="bas">点击获取子组件数据</button>

子.wxml

<view>
  <slot name="top"></slot>
  <view>演示单个插槽的使用</view>
  <slot></slot> 
  <slot name="button"></slot>
</view>

如果父组件想要获取子组件的方法,给子组件身上放置一个id

通过selectComponent获取类似于vue的refs

父 .js

  bas(){
    var child = this.selectComponent('#getcod')
    console.log(child)
  },

数据监听observers

在.js里的component文件中

  data:{
	name:{
		names:'撒旦'，
		id：‘1’
	}
  }
  observers:{
  	//监听一个数据，监听谁就写谁
  	'num1':function(newnum){
  		console.log(newnum)
	 }
	 //可以同时监听两个或多个
    'num1 , num2':function(num1,num2){
      this.setData({
        num: num1+num2
      })
    },
    //如果多个需要监听name对象下面的所有属性可以使用   名.**
    'name.**' : function (newname) {
      console.log(newname)
    }
  },