小程序组件传值

小程序组件传值

创建和使用组件的步骤
在components文件夹右击–>创建文件夹–>在子文件夹上-右击-选择-component选项回车即可
使用
1.在多个地方使用，可以再app.json中加代码，相当于是我们vue的全局组件
代码展示：

"usingComponents": {
    					"Zjcz":"/components/文件夹名/js文件名"
  				}

2.单独引用，直接在引用的json文件中
		代码展示：

"usingComponents": {
    					"Zjcz":"/components/文件夹名/js文件名"
  				}

组建传值 (类似vue)
1. 父传子
- 先父组件的json中写入：

{
  "usingComponents": {
    "Zjcz":"/components/Zjcz/zjcz"
  }
}

- 在父组件上的wxml中写入：

- 在子组件上的properties上添加要接收的属性 title,content		

properties: {
    title:{
      type:String,  //要接收的数据类型
      value:'是个标题'  //没有传递时的默认值
    },
    content:{
      type:String,
      value:'我是内容哦'
    }
  },

*2.子传父*
	- 在子组件上触发一个事件 例如：catchtap="chuanz"
    - 在对应的confirmFn上添加派发的事件和要向父级传递的数据
	this.triggerEvent('quer','ok')
	this.triggerEvent('qux','no')

// 点击确认
      quer(){
        this.triggerEvent('quer','ok')
      },
      // 点击取消
      qux(){
        this.triggerEvent('qux','no')
      }

- 父组件监听子组件派发过来的事件和要接收的数据
	bind要监听的事件名=“回调方法”
	  例如：

• 在父组件的js中接收数据
  //监听确定按钮触发的回调

//确定按钮触发的回调
   quer(e) {
    console.log('确定',e.detail)
    this.zjcz.qiehShow()

  },
  //取消按钮触发的回调
  qux(e) {
    console.log('取消', e.detail)
    this.zjcz.qiehShow()
  },