Vue 与小程序：父组件给子组件传值的区别

wsuo

发布于 2020-09-22 10:30:58

1K0

发布于 2020-09-22 10:30:58

文章被收录于专栏：技术进阶之路

介绍一下 Vue 和小程序在父组件给子组件传值方面的区别。

Vue

在 Vue 如果我们引入了一个子组件 prolist；

import prolist from '../../components/prolist/prolist.vue';

export default {
	data() {
		return {
			prolist: [],
		}
	},
	
	components: {
		prolist
	},

	·······

当我们在使用的时候可以这样使用：

<prolist :prolist="prolist"/>

vue 父组件给子组件传值：

父组件在调用子组件的地方，添加一个 自定义的属性 ，属性的值就是需要传递给子组件的值；
如果属性的值是 变量、boolean、number 数据，需要使用 绑定属性；
子组件定义的地方，添加一个 props 选项，props 选项的值是一个数组或者对象：
1. 如果是数组，数组的元素就是自定义的属性名，可以在组件中通过此自定义属性名访问数据
2. 如果是对象，有两种形式：
  1. key 值为自定义的属性名， value 值为数据类型；
  2. key 值为自定义的属性名， value 为一个对象，该对象有两个选项，一个为 type（数据类型），一个为 default（默认值），如果默认值是对象或者数组，需要把 default 写为一个函数，返回对象和数组；

所以子组件接收值的时候就可以这么写：

<template>
	<view class="prolist">
		<view class="proitem" v-for="(item, index) of prolist" :key="index">
			<view class="itemimg">
				<image src="item.proimg" mode=""></image>
			</view>
			<view class="iteminfo">
				<view class="title">
					{{item.proname}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['prolist'],
		data() {
			return {

			};
		}
	}
</script>

或者使用第二种方式：

export default {
	// props: ['prolist'],
	props: {
		prolist: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	
	data() {
		return {
		};
	}
}

小程序

如果属性的值是变量、boolean、number数据，需要使用绑定属性
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值，如果属性的值是变量、boolean、number数据，需要使用 {{}} 包裹；

<prolist prolist="{{prolist}}"/>

子组件定义的地方，添加一个 properties 选项， properties 选项的值是一个对象：
key 值为自定义的属性名， value 值为数据类型：

Component({
	/**
	 * 组件的属性列表
 	*/
	properties: {
    	prolist: Array
	},
	
	······

可以在组件中通过此自定义属性名访问数据。

<view class="prolist">
    <view wx:for="{{prolist}}" wx:key="*this" bindtap="toDetail" data-proid="{{item.proid}}">
        <view class="proitem">
            <view class="itemimg">
                <image src="{{item.proimg}}" class="image"></image>
            </view>
            <view class="iteminfo">
                <view class="h1">{{item.proname}}</view>
                <view class="price">￥{{item.price}}</view>
            </view>
        </view>
    </view>
</view>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法