uni-app小程序中父组件和子组件传值的实现实例

目录
  • 前言
  • 一、父组件向子组件传值
  • 二、子组件向父组件传值
  • 总结

前言

1、父组件向子组件传值 → 通过数据绑定

2、子组件向父组件传值 → 通过事件

一、父组件向子组件传值

通过props实现，即：子组件通过props来接收父组件传过来的值

实现

父组件中：

1、引入子组件

2、注册子组件

3、通过标签形式载入；使用数据绑定进行传值

子组件中：

1、通过props接收父组件中传递过来的值

具体演示代码

父组件：index.vue

<template>
  <comA :list="listData"></comA>
</template>

<script>
  import comA from '@/components/comA.vue'
  export default{
    components:{comA},
    data(){
    return{
      listData:[
        {"name": "刘", "age": "12"},
        {"name": "肖", "age": "20"}
      ]
      }
    }
  }
</script>

子组件：comA.vue

<template>
  <view>
    <block v-for="(item,index) in list" :key="index">
      <view class="flex">
        <text>{{item.name}}</text>
        <text>{{item.age}}</text>
      </view>
    </block>
  </view>
</template>

<script>
  export default {
    name: "comA",
    props:{
      list:{
        type: [Array],
        default: []
      }
    },
    data() {
      return {}
    },
  }
</script>

二、子组件向父组件传值

通过props实现，即：子组件通过props来接收父组件传过来的值

实现

父组件中：

1、引入子组件

2、注册子组件

3、通过标签形式载入；使用数据绑定进行传值

4、注册子组件函数

子组件中：

1、通过$emit()函数向父组件传值

具体演示代码

父组件：index.vue

<template>
  <comA @ChildClick="childClick"></comA>
</template>

<script>
  import comA from '@/components/comA.vue'
  export default{
    components:{comA},
    methods:{
      childClick(e){
        console.log(e)
      }
    }
  }
</script>

子组件：comA.vue

<template>
  <view @click="sendValue"></view>
</template>

<script>
  export default {
    name:"comA",
    props:{},
    methods:{
      sendValue: function(){
        // 向父组件传值
        this.$emit("childClick","我来自子组件")
      },
    }
  }
</script>

总结

到此这篇关于uni-app小程序中父组件和子组件传值的文章就介绍到这了,更多相关uni-app小程序父组件和子组件传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uniapp地图组件(map)使用与遇到的一些问题总结

    uniapp地图组件(map)使用与遇到的一些问题总结

    目录 前言 首先先看成品 定位图标 获取自身经纬度 通过经纬度 获取当前城市信息 总结 前言 这段时间在开发uniapp的时候使用到map组件 总结一下本次在uniapp中使用map遇到的一些问题 文章分别是基础 定位图标  获取自身经纬度 通过经纬度获取当时城市信息 首先先看成品 废话不多说,直接开始. 首先引入map组件 <template> <view class="content"> <map style="width: 100%; he

  • 浅谈VUE uni-app 基础组件

    1 .scroll-view 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height:使用横向滚动时,需要给添加white-space: nowrap;样式. scroll-y:允许纵向滚动,scroll-x:允许横向滚动 @scroll: 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 数据双向绑定 <template> <view> &

  • 浅谈VUE uni-app 自定义组件

    1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,让父组件自定义要显示的内容 4.使用easycom规范,可以真接使用组件 page/news/news.vue <template> <view> <veiw>自定义组件使用规范</veiw> <card color="red" @fclick=&quo

  • uniapp组件uni-popup弹出层的使用

    uniapp组件uni-popup弹出层的使用

    目录 一.基本用法 二.自定义弹出层(dialog + message) 示例 三.提交信息 (input + 延迟关闭) 四.底部分享示例 官方示例:uni-popup 弹出层 - DCloud 插件市场 弹出层组件用于弹出一个覆盖到页面上的内容,使用场景如:底部弹出分享弹窗.页面插屏广告等 一.基本用法 <template> <view> <button type="primary" @click="toggle('top')"&g

  • uni-app小程序中父组件和子组件传值的实现实例

    目录 前言 一.父组件向子组件传值 二.子组件向父组件传值 总结 前言 1.父组件向子组件传值 → 通过数据绑定 2.子组件向父组件传值 → 通过事件 一.父组件向子组件传值 通过props实现,即:子组件通过props来接收父组件传过来的值 实现 父组件中: 1.引入子组件 2.注册子组件 3.通过标签形式载入:使用数据绑定进行传值 子组件中: 1.通过props接收父组件中传递过来的值 具体演示代码 父组件:index.vue <template> <comA :list="

  • 小程序中监听页面滚动的几种方法实例

    小程序中监听页面滚动的几种方法实例

    目录 目录 实现效果 下面是Intersection Observer在MDN上的介绍 IntersectionObserver relativeToViewport 接受参数 Object margins observe(string targetSelector, function callback) 参数 Object res 小程序中监听页面的其他方法 page-meta scroll-view 总结 在工作中我们经常遇到需要监听页面中元素位置,当元素超出显示区域或即将显示到页面上,我们

  • 微信小程序实现简单手写签名组件的方法实例

    微信小程序实现简单手写签名组件的方法实例

    目录 背景: 需求: 效果 一.思路 二.实现 1. 页面与样式 2. 初始化 3. 点击时 4. 签名时 三.总结 背景: 在做项目过程中,需要在微信小程序中实现手写签名组件.在网上找了微信小程序手写签名实现,但是都是不太理想.在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿.效果不理想.所以退一步,不需要笔锋以及笔迹模拟效果.只需要简单的手写签名实现. 需求: 可以实现用户在微信小程序上手写签名. 需要组件化. 效果 一.思路 在微信小程序中,我们使用canvas组件实现.将用户的输入

  • 微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

    在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示 子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s

  • 微信小程序中的swiper组件详解

    微信小程序中的swiper组件 微信小程序中的swiper组件真的是简单方便 提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to

  • 一步快速解决微信小程序中textarea层级太高遮挡其他组件

    一步快速解决微信小程序中textarea层级太高遮挡其他组件

    前言 由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示: <view class='bar bottomfix shadow justify-center'> <button class='' formType="submit" type="primary" style='font-size:12pt

  • 微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • 详解微信小程序中组件通讯

    这篇主要讲组件通讯 (1)父组件向子组件传值: <header title='{{title}}' bind:fn='fn' id='header'></header> 通过title='{{title}}'传向子组件向子组件传递参数 子组件接收参数: Component({ properties: { title: { // 属性名 type: Number, // 类型(必填) type: String,//目前接受的类型包括:String, Number, Boolean,

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

随机推荐