Vue 与小程序:父组件给子组件传值的区别
时间:2022-07-25
本文章向大家介绍Vue 与小程序:父组件给子组件传值的区别,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
介绍一下 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
选项的值是一个数组或者对象:- 如果是数组,数组的元素就是自定义的属性名,可以在组件中通过此自定义属性名访问数据
- 如果是对象,有两种形式:
-
key
值为自定义的属性名,value
值为数据类型; -
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>
- 数据库进程间通信解决方案之MQ
- Extjs4.2 rest 与webapi数据交互----顺便请教了程序员的路该怎么走
- 这或许是对小白最友好的python入门了吧——7,组织列表
- 这或许是对小白最友好的python入门了吧——6,删除列表元素
- 集群开源软件赏:JGroups
- 看到他我一下子就悟了---委托
- 这或许是对小白最友好的python入门了吧——5,修改和添加列表元素
- 这或许是对小白最友好的python入门了吧——4,列表
- 【深度学习】自动驾驶:使用深度学习预测汽车的转向角度
- 这或许是对小白最友好的python入门了吧——3,数字处理
- 数据库恢复方案
- 这或许是对小白最友好的python入门了吧——2,变量和字符串
- Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续)
- Linux 系统安全与优化配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java 8 中的接口和抽象类到底有啥区别?
- Android自定义View实现简单炫酷的球体进度球实例代码
- 详解android 中文字体向上偏移解决方案
- Android自定义控件仿ios下拉回弹效果
- 当飞桨PaddleHub遇到微信小程序,AI也能指物作诗
- Android仿QQ好友详情页下拉顶部图片缩放效果
- 数组对象转为Map
- TensorFlow2.X使用图片制作简单的数据集训练模型
- Android高性能日志写入方案的实现
- MySQL 三万字精华总结 + 面试100 问,吊打面试官绰绰有余(收藏系列)
- 想后台运行没想到导致磁盘满了
- 来看一道"简单的"C语言面试题
- 这行代码的打印结果确实让人迷惑!
- 如何实现一个高效的启发式算法?(VRPTW篇)
- Ubuntu Server搭建Hyperledger Fabric 2.1学习环境