钉钉小程序 之 自定义组件的使用,以及父组件与子组件(自定义组件)传值

目录:

  1. 本机环境
  2. 自定义组件(子组件)
  3. 页面中引入(父组件引入子组件)
  4. 父组件(使用自定义组件的页面)传值给子组件
  5. 子组件(自定义组件)传值给父组件
  6. 备注

一、本机环境

本机系统: Mac
小程序开发者工具:  1.5.7

二、自定义组件(子组件)

子组件中:
项目的根目录下!!创建自定义组件
在对应 json 文件中定义 component 属性

如图在根目录 的 `components` 目录(目录名自定义)下存放自定义组件

三、页面中引入(父组件引入子组件)

父组件中:
路径引入在对应页面下
添加 json 文件中定义 usingComponents
axml 文件中直接使用


如图 

(图 3.1)

(图 3.2)

四、父组件(使用自定义组件的页面)传值给子组件

子组件中:
通过属性 props 传递值 numIndex
data 中定义对应的值 itemIndex
在生命周期 didMount 中修改对应的值


如图 

(图 4.1)

五、子组件(自定义组件)传值给父组件

子组件通过函数参数,传递值给父组件
子组件通过 props 属性传递函数,但是注意⚠️,函数名必须以 on 开头
父组件中给对应函数属性,传递对应的方法

如图 子组件

(图 5.1)

如图 父组件

(图 5.2)

备注

第 五 步尴尬了很久,因为函数名不是以 on 开头的!!!,过分,开发文档的提示,可不可以加个其他颜色呐!!!微笑😊,参考这里

写给自己的随笔,有问题欢迎指出

原文链接:juejin.im

上一篇:form表单中动态增加输入框
下一篇:JavaScript继承、属性遍历及检测

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    1 个月前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌈 React 函数式组件优化

    1. React 性能优化思路 减少重新 render 的次数。 减少计算的量。主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用。

    1 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • 魔方实时通信一对一音视频组件

    魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎 魔方实时通信,请点击这个 继上一个im聊天组件增加了发动语音,语音视频通话功能 项目的源代码在这里 在线演示 项目结构如下: ...

    2 年前
  • 高阶组件之属性代理

    新组件类继承子React.component类,对传入的组件进行一系列操作,从而产生一个新的组件,达到增强组件的作用 操作props 访问ref 抽取state 封装组件 废话不多说,直接上代码:...

    2 年前
  • 高阶组件HOC - 小试牛刀

    1. 前言 老毕曾经有过一句名言,叫作“国庆七天乐,Coding最快乐~”。所以在这漫漫七天长假,手痒了怎么办?于是乎,就有了接下来的内容。。。 2. 一个中心 今天要分享的内容有关高阶组件的使用。

    2 年前
  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀尝到高价组件的甜头之后,现已深陷其中无法自拔。。。那么这次又会带来什么呢?今天,我们就来看看【高阶组件】和【New Context API】能擦出什么火花! 2. New C...

    2 年前
  • 高阶函数&&高阶组件

    高阶函数 特点: 接受函数类型的参数。 返回值是函数。 高阶函数具有可扩展性。 常见的高阶函数: 定时器 setTimeout(); setInterval() Promise(); 数组相关:...

    8 个月前

官方社区

扫码加入 JavaScript 社区