uni组件传值注意
目录介绍
- 01.组件传值遇到坑
- 02.父组件传值给子组件
- 03.子组件传值给父组件
01.组件传值遇到坑
- 子组件给父组件传值注意点
- 注意子组件触发事件定义的方法,首先在父组件中需要绑定子组件内部对应事件,然后一定要和父控件接受的保持一致,否则无法传递数据。
//在area.vue中,进行事件触发,传递数据
this.$emit('onConfirm',true, selectVal) //在select-school.vue中,需要在在子组件标签上绑定子组件内部对应事件,并且方法名一致
<!-- 地区选择器 -->
<optional :status='show' @onUpdate='onUpdate' @onConfirm='onConfirm'></optional>
- 遇到疑问?
- 要是同级的组件,那么该如何传递数据呢?
02.父组件传值给子组件
- 父组件的代码如下
<!-- 父组件传子组件 -->
<!-- 父组件内部写法 -->
<template>
<view>
<h2>父组件</h2>
<!-- 绑定自定义属性传递数据 -->
<children style="color: #0000FF;" :value="valPar" ></children>
</view>
</template> <script>
//引入子组件
import children from "../../pages/ele/element-children1.vue"
export default {
data() {
return {
valPar:"父组件传递过来的值"
}
},
components:{
//注册子组件
children
},
}
</script>
- 子组件的代码如下
<!-- 父组件传子组件 -->
<!-- 子组件内部写法 -->
<template>
<h2>子组件收到:{{value}}</h2>
</template> <script>
export default {
props:{
value:{
type:String,
default:"默认值"
}
},
data() {
return { }
},
}
</script>
03.子组件传值给父组件
- 父组件的代码如下
<!-- 子组件传父组件 -->
<!-- 父组件内部写法 -->
<template>
<view>
<!-- 接收到子组件传递的数据 -->
<h2>父组件接收到的值:{{valueChild}}</h2>
<!-- 在子组件标签上绑定子组件内部对应事件,并触发对应回调 -->
<children style="color: #0000FF;" @Transmit="handle"></children>
</view>
</template> <script>
//引入子组件
import children from "../../pages/ele/element-children2.vue"
export default {
data() {
return {
//定义属性接收数据
valueChild:"",
}
},
components:{
//注册子组件
children
},
methods:{
// 子组件内部触发事件对应回调handle
handle(val){
this.valueChild=val;
}
}
}
</script>
- 子组件的代码如下
<!-- 子组件传父组件 -->
<!-- 子组件内部写法 -->
<template>
<view>
<h2>子组件</h2>
<!-- 点击按钮进行事件触发 -->
<button @click="handleTransmit">点击给父组件传值</button>
</view>
</template> <script>
export default {
data() {
return {
//要传递的数据
valueParent: "子组件传递过来的数据"
}
},
methods: {
handleTransmit() {
// 进行事件触发,传递数据
this.$emit("Transmit", this.valueParent)
}
}
}
</script>
uni组件传值注意的更多相关文章
- React子组件与父组件传值
一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...
- React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
- Vue-组件嵌套之——父组件向子组件传值
父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...
- angular学习笔记 父子组件传值
一.如何将父组件的值传到子组件? 在子组件里面引入Input,然后用@Input 变量1 接收 接着在父组件中的,子组件标签上添加[msg]="msg",中括号里的名字要与子组件中 ...
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- vue 组件传值
父组件传值给子组件 <list v-show="listLen" :listdata="list" :tipMsg="tipMsg" ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
随机推荐
- Kafka-基本介绍和常见问题
1.kafka 1.1.kafka介绍 kafka是最初由linkedin公司开发的,使用scala语言编写,kafka是一个分布式,分区的,多副本的,多订阅者的消息队列系统. 1.2.kafka ...
- SQL中Between And的问题
使用Between And时需要注意的事项:(1)"between and"是包括边界值的,"not between"不包括边界值.(2)"betwe ...
- MaxCompute(ODPS)和Hive的区别
Hive概述 架构于Hadoop之上,可以将结构化的HDFS文件映射成一张表,并提供了类似于SQL语法的HQL查询功能. 核心本质:将HQL语句转换成MapReduce任务. Hive的优缺点 优点 ...
- DP的各种优化小结
动态规划算法(简称动规,DP),是IO中最为常见的,也是最为重要的算法之一.这也就意味着,在各种题目与比赛中它会有很多稀奇古怪的算法和优化,时不时地在你的面前出现一个TLE,MLE和RE来搞你的心态. ...
- Shell 特殊符号(变量)用法小结
Shell | 特殊变量 $n 基本语法: $n (功能描述:n 为数字,$0 代表该脚本名称,$1-$9 代表第一到第九个参数,十以上的参数,十以上的参数需要用大括号包含,如${10}) 例如: ...
- test-02-java 单元测试框架 junit5 入门介绍
拓展阅读 junit5 系列 基于 junit5 实现 junitperf 源码分析 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息 ...
- OCR 02: Tesseract-OCR
Catalog OCR 01: EasyOCR OCR 02: Tesseract-OCR OCR 03: PaddleOCR Project Host And Brief Official Site ...
- Js实用小技巧
Js实用小技巧 这是一份Js实用小技巧,也可以是一份Js挨打小技巧,下面的一系列操作虽然能够在一定程度上使代码更加简洁,但是在缺少注释的情况下会降低可读性,所以需要谨慎使用这些黑魔法. 位元算 取整 ...
- SpringCloud Config配置中心实战
介绍 本文以理论结合实践编写,篇幅较长,各位看官保持耐心:),部分内容引用自网络. 什么是配置中心? 当微服务过多的时候,每个微服务的配置很难集中管理.SpringCloud Config通过git代 ...
- Java并发编程实例--10.使用线程组
并发API提供的一个有趣功能是可以将多个线程组成一个组. 这样我们就能将这一组线程看做一个单元并且提供改组内线程对象的读取操作.例如 你有一些线程在执行同样的任务并且你想控制他们,不考虑有多少个线程仍 ...