温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-08-04 11:10:01 来源:亿速云 阅读:235 作者:iii 栏目:开发技术

这篇文章主要介绍“uni-app小程序中父组件和子组件传值如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“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小程序中父组件和子组件传值如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI