微信小程序---wepy中的父子组件

本文将通过抽取tab栏组件为例，来阐述一下父子组件，因为比较匆忙，所以只写了比较重要的部分，给有基础的朋友看，按顺序理解应该就没问题啦~~

官方文档

新建一个页面，放抽取的组件，页面格式----->wepy.component（注意不是page哦）

将需要抽取的组件放入进去（tabBar.wpy）

<template>

<!-- 顶部区域 -->

< view class = "tab-bar" >

< block wx:for = "{{ tabList }}" wx:key = "" >

< view @tap="selectItem({{index}})" class="item {{selectIndex==index?'active':''}}"> {{ item }} </ view >

</ block >

</ view >

</ template >

在需要引入的的页面引进抽取的组件

import tabBar from '../comments/tabBar'

在需要的页面声明组件

components = {

tabBar

};

在页面结构部分补上组件

<tabBar></tabBar>

数据不能写死，如何从父组件往子组件传值？--props传值

1、静态传值 ：静态传值为父组件向子组件传递常量数据，因此只能传递String字符串类型。

子组件中：

// child.wpy

props = { title : String };

onLoad () { console.log(this.title);}

父组件中：

< child title = " mytitle " > </ child >

<tabBar title="我对于这个的理解"></ tabBar >  子组件中可以打印出这句话，说明能够传值

如果想验证，可以在子组件中打印一下

< view class="title"> title</ view>    注意需要重新启动黑窗，算是wepy的坑吧，命令行工具的坑

2、动态传值： 类型可以很多，但是需要自己设置（传数据）

子组件中：

props = {

// 静态传值

title: String,

// 父向子单向动态传值

syncTitle :

{ type: Array , default: ' [] ' },}

父组件中：

<tabBar :title = " parentTitle " :syncTitle.sync = " parentTitle " ></tabBar>

data = { parentTitle : ['全部','待付款','已付款','退款'] }; 给parentTitle要赋值，在子组件中才会打印出来

子组件中： ：

< block wx:for = "{{syncTitle }}" wx:key = "" >  传了值子组件中获取了就可以循环，这里可以修改名字的

< view > {{ item }} </ view >  注意这里就不用点了，直接就是item

3、双向传值： twoWay为true时，表示子组件向父组件单向动态传值(切换功能)

子组件中：

props =

{ // 静态传值

title: String,

// 父向子单向动态传值

syncTitle: { type: String, default: 'null' },

twoWayTitle : -->selectIndex{ type: String,numeber, default: 'nothing', twoWay: true （必须为true）} };

< view @tap="selectItem({{index}})" class = "item {{ selectIndex == index? 'active' : ''}}" > {{ item }} </ view >

父组件中：要传入index的值

< tabBar title = "我对于这个的理解!" :syncTitle.sync="parentTitle"   :twoWayTitle : selectIndex = " selectIndex " ></ tabBar >

 <!-- tab栏切换内容区域 -->
    <view class="tab-content">
      <view hidden="{{selectIndex!=0}}" class="item">1</view>
      <view hidden="{{selectIndex!=1}}" class="item">2</view>
      <view hidden="{{selectIndex!=2}}" class="item">3</view>
      <view hidden="{{selectIndex!=3}}" class="item">4</view>
    </view>

data = {

// 默认选中的值

selectIndex:3,  这样打开页面的时候就是第三个，可以随意修改

子组件中：js功能， 可以切换tab栏内容

methods = {

selectItem(index) {

console.log(index)

this.selectIndex = index

}

}