美文网首页壁纸小家
小程序入门开发父子通信-父传子

小程序入门开发父子通信-父传子

作者: 玩点小技术 | 来源:发表于2020-10-25 16:15 被阅读0次

小程序的父子通信,其实跟vue的都大同小异了,如果你很熟悉vue的话,那就分分钟钟的搞懂!话不多说,直接看代码。

1.父组件

通过viewText="{{viewText}}"传向子组件


<MyToast viewText="{{viewText}}" bind:myEvent="OnViewText"></MyToast>

2.子组件获取参数

properties:{ viewText:{ //属性名 type:Number, //类型,必填项 目前接受的类型有:String,Number,Boolean,Object,Arrray,null(表示任意类型) value:'' //属性初始值(可选)如果未制定,会根据类型选择一个。 }}

properties是专门获取父组件上传来的参数,这个时候可以根据实际情况来获取参数里的实际值,如果需求是一打开页面就要获取值,可以在子组件里使用

ready()的生命周期方法来获取。

ready(){ //一打开页面获取 console.log(this.properties.viewText)}

或者你想通过某个特定的方式来触发获取参数值,比如点击事件或者其他的事件来触发,可以在methods:{}里去定义方法。


methods: {  
    onClick(){ 
    //某个点击事件        
    console.log(this.properties.viewText) 
    }
}

父传子参数教程到此结束,希望看到的小伙伴觉得还有不足的地方,多多发言!共同进步!

相关文章

  • 小程序入门开发父子通信-父传子

    小程序的父子通信,其实跟vue的都大同小异了,如果你很熟悉vue的话,那就分分钟钟的搞懂!话不多说,直接看代码。 ...

  • vue学习笔记-组件间通信

    组件的优势:便于维护,提高开发效率,可复用,便于协同开发,便于调试。组件间的通信 父子间通信 子传父 父传子 2....

  • 2018-09-25组件

    组件分为:子传父父传子非父子之间的通信 1.子传父 2.父传子 3.非父子之间传值

  • 2019-05-01 React组件通信

    父子 父子通信(回调函数)[组件通信] 父传子:父组件传一个函数给子组件,子组件在恰当的时候调用 子传父:1.父组...

  • vue2.0中的组件通信:v-model、作用域插槽、事件总线等

    前言 一篇小总结,组件间的通信问题,把v-model、作用域插槽也归入了。 通信场景 父传子 子传父 父子同步 非...

  • 父传子实现

    父传子实现 目标任务: 实现父子通信中的父传子,把父组件中的数据传给子组件 实现步骤 父组件提供要传递的数据 - ...

  • vue-cli组件传值的几种方式

    Vue开发中你可能经常需要父子传参之类的: 一.父传子 1.父传子: 子接收:props: ['title'] -...

  • Vue3.0父子组件传值笔记

    1、父传子组件机制 父组件的代码 子组件的代码 2、子传父通信机制 父组件代码 子组件代码 3、非父子组件通信机制...

  • 父子组件的通信--父传子

    一.回顾父子组件 子组件在父组件中注册并使用,在html中使用的是父组件的标签,子组件也会被展示。 1.不用语法糖...

  • 微信小程序

    1. 组件通信 1.1. 父子组件通信 父传子子组件通过properties接受这个属性,这个属性会被放到子组件的...

网友评论

    本文标题:小程序入门开发父子通信-父传子

    本文链接:https://www.haomeiwen.com/subject/nirnmktx.html