【小程序】组件之间的数据传递

① 给子组件设置属性：

• 用于子组件获取父组件的数据
• 子组件修改数据不会同步到父组件！

1. 在页面中使用组件，并给组件设置自定义属性，属性值为需要传递的数据

<my-po pageNum="{{18}}"></my-po>

2. 在组件中，需要设置 properties 接收数据

Component({
	// 组件的属性列表：接收外部传入的数据
	properties: {
		// 写法 1 : 接收传入的数据，并且指定传入值的类型为 String
		pageNum: String,
		// 写法 2 : 接收传入的数据
		// pageNum: {
		// 	type: String, // 指定传入值的类型为 String
		// 	value: 18, // 设置默认值，注意，这里的默认值是 Number 类型的
		// },
	},

	methods: {
		showPageNum() {
			// 在组件的 js 文件中获取 pageNum
			let pageNum = this.properties.pageNum;
			console.log("pageNum", typeof pageNum, pageNum);
		},
	},
});

接收数据之后，便可在组件的 WXML 中通过 {{}} 使用

<view>pageNum: {{pageNum}}</view>
<button bindtap="showPageNum">点击打印数据</button>

可以发现，我们传入的数据 18 是 Number 类型的，可是打印的数据却是 String 类型的，因为 properties 指定传入值类型时，如果不是指定类型，会进行强制转换

data & properties

• 在小程序中，data 的数据与 properties 的数据，都存储在同一个对象中

Component({
	// 组件的属性列表：接收外部传入的数据
	properties: {
		pageNum: {
			type: Number,
			value: 18,
		},
	},
	// 组件的初始数据：组件私有的数据
	data: {
		comNum: 0,
	},
	// 组件的方法列表
	methods: {
		showPageNum() {
			console.log("this.data", this.data);
			console.log("this.properties", this.properties);
			console.log(this.data === this.properties); // true
		},
	},
});

我们可以发现，this.data、this.properties 是同一个对象的引用

数据的修改

• 在组件中，修改页面传递过来的数据，原数据不会改变

• 在页面中，修改数据后，数据会被重新传递到组件

<view>home:</view>
<view wx:for="{{arrData}}" wx:key="index">
	{{item.name}} : {{item.price}}
</view>
<button type="primary" bindtap="changeData">点击修改数据</button>
<view>---------------------------------------------------</view>
<!-- 使用组件 -->
<my-po userData="{{arrData}}"></my-po>

Page({
	data: {
		arrData: [
			{ name: "JS", price: 100 },
			{ name: "C++", price: 200 },
			{ name: "Java", price: 300 },
		],
	},
	// 修改页面的数据
	changeData() {
		this.setData({
			arrData: [
				{ name: "C++", price: 200 },
				{ name: "Java", price: 300 },
			],
		});
	},
});

<view>test2:</view>
<view wx:for="{{userData}}" wx:key="index">
	{{item.name}} : {{item.price}}
</view>
<button type="primary" bindtap="changePro">点击修改数据</button>

Component({
	properties: {
		userData: Array, // 得到页面传过来的数组
	},
	methods: {
		// 修改页面传递过来的数据
		changePro() {
			this.setData({
				userData: [
					{ name: "JS", price: 100 },
					{ name: "C++", price: 200 },
				],
			});
		},
	},
});

我们可以发现：
在组件中，修改数据后，组件中的数据确实被改变了，但页面的数据不会被影响
在页面中，修改数据后，页面和组件中的数据都会被改变，且整个页面都会被重新渲染

事件方法 & 普通方法

我们约定，普通方法以 _ 开头：

<view> name: {{ name }} </view>
<button bindtap="modifyName"> modify name </button>

Component({
	data: {
		name: "superman",
	},

	methods: {
		// 事件方法
		modifyName() {
			this.setData({ name: this.data.name + "!" });
			this._showData();
		},
		// 普通方法
		_showData() {
			console.log("新数据：", this.data.name);
		},
	},
});

② 给子组件绑定事件：

• 用于父组件获取子组件的数据
• 我们可以用 “绑定事件” 配合 “设置组件属性” 的方式，实现子组件与父组件的数据同步
• 我们使用 bind:sync / bindsync 绑定事件

<view>父组件的 num：{{num}}</view>
<!-- 给子组件绑定自定义事件，事件函数为父组件中的方法 -->
<my-po num="{{num}}" bindsync="syncNum"></my-po>

Page({
	data: {
		num: 1102,
	},
	// 在父组件中定义一个方法，用来同步在子组件中产生变化的数据
	syncNum(e) {
		// 通过 `e.detail.子组件中定义的属性名` 获取子组件传递过来的数据
		console.log("sync", e.detail.value);
		this.setData({
			// 修改父组件中的数据
			num: e.detail.value,
		});
	},
});

<view>子组件接收到的 num：{{num}}</view>
<button bindtap="changeNum">点击修改</button>

Component({
	properties: {
		num: Number,
	},
	methods: {
		changeNum() {
			// 修改子组件接收到的数据
			this.setData({ num: this.data.num + 1 });
			// 通过 triggerEvent 调用父组件绑定在子组件上的事件，并传入数据参数
			// 格式: this.triggerEvent("绑定的事件名", { 自定义属性名: 传递的数据 })
			this.triggerEvent("sync", { value: this.properties.num });
		},
	},
});

③ 获取子组件实例对象：

• 用于父组件获取子组件的数据
• 这个方法非常暴力，直接在父组件中获取整个子组件实例

<view>父组件的 num: {{num}}</view>
<button bindtap="getChild">修改子组件数据</button>
<!-- 给子组件设置 id / class 属性 -->
<my-po num="{{num}}" id="child"></my-po>

Page({
	data: {
		num: 1,
	},
	getChild() {
		// 通过 selectComponent 获取子组件实例
		const child = this.selectComponent("#child");
		// 直接在父组件中修改子组件数据
		child.setData({
			// 注意：这里的子组件数据是通过 child 获取的，不是 this
			num: child.properties.num + 1,
		});
		// 直接在父组件中调用子组件的方法
		child.showSome();
	},
});

<view>子组件接收到的 num: {{num}}</view>
<button bindtap="changeNum">点击修改</button>

Component({
	properties: {
		num: Number,
	},
	methods: {
		changeNum() {
			this.setData({ num: this.properties.num + 1 });
		},
		showSome() {
			console.log("子组件中的方法 showSome 被调用");
		},
	},
});