uni-app入门:自定义组件实现父子组件参数传递

     1.属性绑定:父组件传递参数到子组件
     2.事件绑定:子组件传递参数到父组件
     3.获取组件对象实例:父组件获取子组件实例对象进行参数传递
     4.子组件变化触发父组件数据更新

1.属性绑定:父组件传递参数到子组件

    首先交代一下基本的项目信息:主页面为index.wxml,创建test子组件,文件目录:component/test/test,index.json中引用test组件.

{
  "component": true,
  "usingComponents": {
    "test":"/component/test/test"
  }
}
1
2
3
4
5
6

演示案例:
    父组件中定义num并初始化数据为1,将num传递到子组件test中并展示.
index.js中定义num并初始化数据为1

Page({
  data: {
    num:1
   }
   })
1
2
3
4
5

index.html中创建view组件

<view>父组件属性:{{num}}</view>
1

test.html中接收父组件中数据:

<view>子组件获取到父组件的属性:{{num}}</view>
1

test.js中定义num属性:

Componet({
  properties:{
    num:Number
  }
})
1
2
3
4
5

页面展示效果如下:

2.2.事件绑定:子组件传递参数到父组件

    操作步骤:
1.父组件js中定义函数;
2.父组件中通过传递自定义事件形式传递给子组件;
3.子组件js中调用父组件自定义事件;

 this.triggerEvent('父组件函数',
      {value: 子组件参数});
1
2

4.父组件自定义事件处理子组件传递参数,通过event.detail.value获取
    示例说明:
index.wxml中添加test组件,test组件创建初始值subCount和加一按钮,点击按钮实现subCount加一.父组件中创建初始值parCount,实现test子组件中点击按钮之后不仅能实现subCout加一,也能将subCount赋值给parCount.即点击按钮实现subCount与parCount同步变化.
子组件test中初始化subCount以及创建按钮实现点击加一操作:
test.wxml:

<view>子组件data属性subCount值:{{subCount}}</view>
<button type="primary" bindtap="subCountAdd">子组件中点击数据值加一</button>
1
2

test.js中:

 Component({
data:{
    subCount:1
  },
 methods:{
 subCountAdd:function(){
      this.setData({
        subCount: this.data.subCount+1
      })
    }}
})
1
2
3
4
5
6
7
8
9
10
11

父组件index.js中初始化parCount并创建传递参数函数,通过参数event.detail.value来获取传递参数:

Page({
  data: {
    parCount:2
   },
   // 自定义父组件函数
   transferFucntion(event){
    console.log("父组件中传参事件触发!"),
    console.log(event.detail)
  }
  }
)
1
2
3
4
5
6
7
8
9
10
11

父组件index.wxml中在子组件test中传递自定义函数:

<test bind:transferFucntion="transferFucntion"></test>
<view>父组件data属性parCount值:{{parCount}}</view>
1
2

子组件test.js中的加一方法中添加父组件的自定义事件,传递参数为

Component({
data:{
    subCount:1
  },
 methods:{
 subCountAdd:function(){
      this.setData({
        subCount: this.data.subCount+1
      }),
        // 注册父组件方法,this.triggerEvent('父组件函数名',参数(非必填))
      this.triggerEvent('transferFucntion',
      {value: this.data.subCount});
    }}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

父组件index.js中通过参数event.detail.value来获取传递参数并赋值给parCount:

Page({
  data: {
    parCount:2
   },
   // 自定义父组件函数
   transferFucntion(event){
    console.log("父组件中传参事件触发!"),
    console.log(event.detail),
    this.setData({
      parCount:event.detail.value
    })
  }
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最终实现效果,点击按钮,子组件中subCount与parCount同步变化.

3.获取组件对象实例:父组件获取子组件实例对象进行参数传递

    父组件中使用this.selectComponent('子组件id选择器或是class选择器)进行获取子组件实例,进而传递参数到子组件.
演示示例:
    父组件index.wxml中创建点击事件获取子组件test中subCount值以及调用子组件的subCountAdd方法(subCount与subCountAdd均在上个案例中定义过)
    index.wxml中创建点击事件selectSubCompnet并给子组件test设置id属性和class属性:

<test id="subCompnetId" class="subCompnetClass"></test>
<button type="primary" bindtap="selectSubCompnet">点击获取子组件</button>
1
2

index.js中点击事件获取子组件实例并获取子组件属性和方法并调用:

Page({
  // 父组件选择子组件
  selectSubCompnet(){
    const subCompnet=this.selectComponent('#subCompnetId');
    console.log("subCount值:"+subCompnet.data.subCount);
    subCompnet.subCountAdd();
    console.log("调用子组件subCountAdd方法之后subCount值:"+subCompnet.data.subCount);
  }
})
1
2
3
4
5
6
7
8
9

点击按钮并观察控制台输出内容:

观察可以发现子组件subCount与subCountAdd方法均被调用;使用this.setDate即可更改子组件属性.

4.子组件变化触发父组件数据更新

    场景说明：现有一自定义登录组件，进入到我的页面显示进行登录实现我的页面中用户信息全部渲染。未登录页面截图如下

登录成功后页面截图如下：
    实现方式说明：直接从登录成功的逻辑中添加如下内容使父组件所在的页面进行刷新。

setTimeout(()=>{ 
						let currentPage=getCurrentPages();
						 console.log("getCurrentPages()",currentPage)
						 let page = currentPage.pop(); 
						 console.log("getCurrentPages().pop()",page)
						 if (!page) return;
						  page.onLoad();
						  },1500)        
1
2
3
4
5
6
7
8

    说明：这是使用子组件注册事件的方式uni.$emit 不会生效，原因是该场景下我的页面已经渲染完成，父组件生命周期中无法调用uni.$on 获取子组件注册的事件，所以折中的办法就是上面获取子组件所在页面的示例然后强制刷新页面，这样父组件我的页面就可以执行onload生命周期函数，这里面就可以重新渲染数据。