【微信小程序】自定义组件，父子组件传值实现动态表格_微信小程序 自定义组件动态值

---

一、效果篇

图解：表格是父组件，表单是子组件

二、代码篇

先附上目录结构

//component-child.wxml
<view class="container" hidden="{{!isShow}}">
	<label for="">学号：</label>
	<input
	 type="number"
	 placeholder="请输入学号"
	 name="userNum"
	 bindinput="userNumInput"
	></input>

	<label for="">姓名：</label>
	<input
	 type="text"
	 maxlength="11"
	 placeholder="请输入姓名"
	 name="userName"
	 bindinput="userNameInput"
	></input>

	<radio-group bindchange="selectedChange">
		<radio value="男">
			男
		</radio>
		<radio value="女">
			女
		</radio>
	</radio-group>
	<button
	 type="primary"
	 form-type="submit"
	 bindtap="submit"
	>提交
	</button>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//component-child.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
   isShow: Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    person:
      {
        userNum:'',
        username:'',
        selected:''
      }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    setShow: function (str) {
      this.setData({
        isShow: str
      })
    },

    //获取用户输入的值
    userNameInput:function(e)
    {
        this.setData({
        userName: e.detail.value
        })
    },
     //获取用户输入的值
     userNumInput:function(e)
     {
         this.setData({
         userNum: e.detail.value
         })
     },
      //获取用户选取的值
    selectedChange:function(e)
     {
         this.setData({
         selected: e.detail.value
         })
     },

    submit:function(str){
      this.triggerEvent("myevent",{
        num:this.data.userNum,
        name:this.data.userName,
        selected:this.data.selected
      })
      // console.log(this.data.userName)
      // console.log(this.data.userNum)
      // console.log(this.data.selected)
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

//component-child.wxss
.container{
    font-size: 14px;
    border: 1px solid rgb(211, 200, 200);
    width: 300px;
    height: 200px;
    margin: 10px 40px;
}
input{
    border: 1px dotted silver;
}
button{
    margin-top: 50rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

//component-parent.wxml
<view>
	<button bindtap="authChange">{{auth}}</button>

	<view>
		<view class="table" hidden="{{pisShow}}">
			<view class="tr bg-w">
				<view class="th">学号</view>
				<view class="th">姓名</view>
				<view class="th ">性别</view>
			</view>
			<block>
				<view class="tr bg-g" wx:for="{{personsArray}}">
					<view class="td">{{item.num}}</view>
					<view class="td">{{item.name}}</view>
					<view class="td">{{item.selected}}</view>
				</view>
			</block>
		</view>
	</view>

	<component-child
	 id="child1"
	 isShow="{{cisShow}}"
	 bind:myevent="onMyEvent"
	></component-child>
</view>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//component-parent.wxss
.table {
    border: 0px solid darkgray;
  }
  .tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 2rem;
    align-items: center;
  }
  .td {
      width:40%;
      justify-content: center;
      text-align: center;
      border:1px solid #d3dadd;
  }
  .bg-w{
    background: snow;
  }
  .bg-g{
    background: #E6F3F9;
  }
  .th {
    width: 40%;
    justify-content: center;
    background: #3366FF;
    color: #fff;
    display: flex;
    height: 2rem;
    align-items: center;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//component-parent.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    auth:"开始登记",
    pisShow:false,
    cisShow:false,
    personsArray:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //点击按钮之后改变按钮的文字
    authChange(){
      this.setData({
        auth:"登记中"
      }),
       //获取子组件实例
      this.child1 = this.selectComponent("#child1");
      this.child1.setShow("true");
    },
    
    onMyEvent: function (e) {
      var curPersonsArray = this.data.personsArray;
      var allPersonsArray = curPersonsArray.concat(e.detail);
      this.setData({
        personsArray: allPersonsArray
      }),
      console.log(this.data.personsArray)
      // this.data.persons.push(e); 
      // console.log(this.data.cisShow)
  }
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

重点：记得引入子组件

//component-parent.json
{
  "component": true,
  "usingComponents": {
    "component-child": "../component-child/component-child"
  }
}
1
2
3
4
5
6
7

三、知识点篇

1.父组件的数据传给子组件

父传子传值方法：
1.子组件定义properties来接收父组件传递过来的值，在父组件中以属性的方法呈现
2.Page在引用组件时通过data-xxx设置，子组件中的js文件可在控制台dataset中看到传过来的值

父组件改变子组件的值：
用this.selectComponent获取子组件实例，来改变子组件的值

2.子组件的数据传给父组件

子传父传值方法：
调用this.trrigerEvent方法，通过事件触发起到传值的作用
1.在子组件绑定事件，触发函数this.trrigerEvent(“事件名”，数据)
2.使用：在父组件bind:事件名=“方法名”（这里的方法是要在父组件自己定义一个方法）

知识点大概就以上这些啦，可结合上面所给代码进行对照着理解、学习~
tip: 最最重要的是：父子组件的使用记得在json文件中引入，而且路径记得书写正确！

如果能帮的到你，欢迎大家点赞，评论，收藏，转发~
如有不足也请在评论区提出批评指正！多多指教！