首页 > 编程语言 >小程序自定义组件以及页面之间的数据传递

小程序自定义组件以及页面之间的数据传递

时间:2022-11-08 09:13:17浏览次数:42  
标签:自定义 data 代码 组件 数据 页面

1、自定义组件接收页面传递过来的数据

首先在组件的属性列表properties中设置数据类型以及默认值,然后再在引用组件的页面上设置相应的接收数据的名字以及数据内容(跟小程序本身页面数据渲染一样的写法)

组件中以下代码
properties:{
    isShow:{
    type:Boolean,
    value:false,
  }
}
页面中以下代码
<my-component  isShow="{{pageBoolean}}" ></my-component>
data:{
   pageBoolean:true,
}

2、数据从自定义组件传递到页面

在组件中使用下面代码
this.triggerEvent('okEvent', {data}) 
页面中使用下面代码
<my-component bind:okEvent="myEvent" ></my-component>

methods:function(){
    myEvent(e){
      this.setData({
        data:e.detail.data
    })
  }
}

标签:自定义,data,代码,组件,数据,页面
From: https://www.cnblogs.com/Sultan-ST/p/16868534.html

相关文章

  • vue3-组合式api-参数(props,context)及父子组件传值
    一、父组件<template> <div>  <h2>我是父组件</h2>  <div>counter:{{counter}}</div>  <button@click="callChildFun">调用子组件方法</button> ......
  • 组件全局注册 每个页面可以直接使用组件
    文件结构:  index.js文件代码:importPageToolsfrom"./PageTools";importUploadExcelfrom"./UploadExcel";importImageUploadfrom"./ImageUpload";impor......
  • 创建vue自定义指令
    title:创建自定义指令在组件标签的使用中,我们经常使用一些指令,例如v-for/v-model,在这里我们学习一下如何实现一个自定义指令,如何写一个自己想要实现的自定义指令功能,最......
  • 无法启动组件[StandardEngine[Catalina].StandardHost[localhost].StandardContext[]]
    最近在更新代码后,一直运行不了tomcat的项目。【报错问题】如下:  后来经过网上各种资源尝试,什么斜杠没加、依赖包没有、环境问题等等均无效果。最后呢,竟然是无意间操......
  • SQL自定义函数
     存储函数和存储过程统称为存储例程(storeroutine),存储函数的限制比较多,例如不能用临时表,只能用表变量,而存储过程的限制较少,存储过程的实现功能要复杂些,而函数的......
  • 记一次无法访问到静态页面
       <=    =>      很久没有写博客了这次写是因为碰到了卡我一个小时的问题,如图,静态资源一致不能访问,后来我尝试用了另一种方式   就是......
  • Vue 如何实现组件的切换
    使用场景:我们开发项目的时候,会遇到组件之间的切换,一般都是创建组件销毁组件来回切换;但是现在需求是切换组件的时候,另一个组件不会销毁;基于这个需求,我们使用keep-live......
  • MySQL自定义函数
    首先,做一个热身。引进一个系统函数LAST_INSERT_ID();这个函数的功能就是放回上一次插入的数据的id做个示范插入数据                       ......
  • 用windbg为无效页面建立页面映射
       前几天和同事扯淡,说调试驱动时访问无效内存会蓝屏,好麻烦,应该让windbg自动建立一个有效的页面,这样就不用蓝屏重启了。虽然说这是扯淡,但仔细想想貌似也不是不可能实现......
  • 做用户权限的时候 刷新后页面 404
    ps:404页面一定要放在最后,{path:"*",redirect:"/404",hidden:true}  ,在创建路由实例的时候,加载路由规则routes的时候默认把404页面放在最后,但是使用addR......