微信小程序父子传值

父页面传给子组件是通过标签传递的
在父页面的index.json文件中引入子组件Demo

//父页面的index.json
{"usingComponents":{"Tabs":"../../components/Demo/Demo"}}

父页面使用子组件Demo

<!-- 父页面的index.wxml -->
<Demo></Demo>
1
2
父页面的index.js文件中定义变量

//父页面的index.js
data:{
	num:10,
	text:"父页面的数据"
}

通过标签传递给子组件

<!-- 父页面的index.wxml -->
<Demo num="{{num}}" text="{{text}}" ></Demo>
1
2
子组件接收

// 子组件Demo.js
Component({
  /** 组件的属性列表*/
  properties: {
    num:{
      type:Number,//接收类型
      value:0     //默认值
    },
    text:{
      type:String,
      value:""
    },
    data:{},
    methods:{}
}

然后可以在子组件上展示了 直接使用变量名
这个数据当成data中的的速决直接即可

<!-- 子组件Demo.wxml -->
<view>{{num}}</view>
<view>{{text}}</view>

子向父传递数据是通过事件的方式传递
比如修改父级的text变量：
在子组件上定义一个按钮button

<!-- 子组件Demo.wxml -->
<view>{{num}}</view>
<view>{{text}}</view>
<!-- bindtap 绑定事件方法 -->
<button bindtap="textChange"></button>

子组件定义事件

methods: {
    textChange(){
    /**
       点击事件触发的时候
       触发父组件中的自定义事件，同时传递数据给  父组件
       this.triggerEvent("父组件事件名称",传递的参数);
    */
      let text="子组件修改父级的text"
      // 触发 父组件的事件  自定义
      this.triggerEvent("demoTextChange",{text});
    }
  }

父级index.wxml页面：

<!-- 父页面的index.wxml -->
<!-- 再定义一个方法接收子组件 -->
<Demo num="{{num}}" text="{{text}}" binddemoTextChange="handleDemoTextChange"></Demo>

父级index.js定义方法 handleDemoTextChange

// 父级index.js
Page({
	// 标题的点击事件  从子组件传来
  handleDemoTextChange(e){
    console.log(e);// 接收并打印出来查看数据
    let text=e.detail.text;
    // 修改父级变量，子组件也会响应式的发生变化
    this.setData({
    	text
    })
  }
})

还有一种父传子时用过URl的方式
通过微信小程序跳转的方式传参
navigator 标签中的 url= 属性

<!--父页面.wxml-->
<navigator url="/pages/index2/index?id=123">

子页面.js通过微信小程序生命周期函数onLoad接收

onLoad: function (options) {
    console.log(options)//打印出来查看数据
  },

这种方式多用于通过不同的id接收后台数据然后渲染展示公用一个页面，比如淘宝商品的详细页面等