专栏首页lib库uni组件传值注意
原创

uni组件传值注意

目录介绍

  • 01.组件传值遇到坑
  • 02.父组件传值给子组件
  • 03.子组件传值给父组件

01.组件传值遇到坑

  • 子组件给父组件传值注意点
    • 注意子组件触发事件定义的方法,首先在父组件中需要绑定子组件内部对应事件,然后一定要和父控件接受的保持一致,否则无法传递数据。//在area.vue中,进行事件触发,传递数据 this.$emit('onConfirm',true, selectVal)
//在select-school.vue中,需要在在子组件标签上绑定子组件内部对应事件,并且方法名一致
<!-- 地区选择器 -->
<optional :status='show' @onUpdate='onUpdate' @onConfirm='onConfirm'></optional>
```
  • 遇到疑问?
    • 要是同级的组件,那么该如何传递数据呢?

02.父组件传值给子组件

  • 父组件的代码如下<!-- 父组件传子组件 --> <!-- 父组件内部写法 --> <template> <view> <h2>父组件</h2> <!-- 绑定自定义属性传递数据 --> <children style="color: #0000FF;" :value="valPar" ></children> </view> </template>
<script>
    //引入子组件
    import children from "../../pages/ele/element-children1.vue"
    export default {
        data() {
            return {
                valPar:"父组件传递过来的值"
            }
        },
        components:{
			//注册子组件
            children
        },
    }
</script>
```
  • 子组件的代码如下<!-- 父组件传子组件 --> <!-- 子组件内部写法 --> <template> <h2>子组件收到:{{value}}</h2> </template>
<script>
    export default {
        props:{
            value:{
                type:String,
                default:"默认值"
            }
        },
        data() {
            return {
            }
        },
    }
</script>
```

03.子组件传值给父组件

  • 父组件的代码如下<!-- 子组件传父组件 --> <!-- 父组件内部写法 --> <template> <view> <!-- 接收到子组件传递的数据 --> <h2>父组件接收到的值:{{valueChild}}</h2> <!-- 在子组件标签上绑定子组件内部对应事件,并触发对应回调 --> <children style="color: #0000FF;" @Transmit="handle"></children> </view> </template>
<script>
    //引入子组件
    import children from "../../pages/ele/element-children2.vue"
    export default {
        data() {
            return {
				//定义属性接收数据
                valueChild:"",
            }
        },
        components:{
			//注册子组件
            children
        },
        methods:{
            // 子组件内部触发事件对应回调handle
            handle(val){
                this.valueChild=val;
            }
        }
    }
</script>
```
  • 子组件的代码如下<!-- 子组件传父组件 --> <!-- 子组件内部写法 --> <template> <view> <h2>子组件</h2> <!-- 点击按钮进行事件触发 --> <button @click="handleTransmit">点击给父组件传值</button> </view> </template>
<script>
    export default {
        data() {
            return {
                //要传递的数据
                valueParent: "子组件传递过来的数据"
            }
        },
        methods: {
            handleTransmit() {
                // 进行事件触发,传递数据
                this.$emit("Transmit", this.valueParent)
            }
        }
    }
</script>
```

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ViewStub你真的了解吗

    杨充
  • 基于腾讯x5开源库,提高60%开发效率

    杨充
  • WebView开源库终极方案

    杨充
  • 小程序 子组件传值(triggerEvent)

    事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。关于事件的基本概念和用法,参见 事件 。

    李才哥
  • 42. Vue组件传值-子组件通过事件调用向父组件传值

    上一篇章讲解了使用props将父组件的值传递到子组件中,那么子组件如果反过来传递给父组件呢?

    Devops海洋的渔夫
  • 企业 SOA 设计(2)–组件化产品开发平台

    上一篇《企业 SOA 设计(1)–ESB 设计》中,写到我们的 SOA 设计分为两个层面来进行:一个是系统间的 SOA 设计,主要通过 ESB 来完成;另一方面...

    用户1172223
  • 组件化通用模式

    一、前言 模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变...

    企鹅号小编
  • 基于AngularJS的个推前端云组件探秘

    AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计...

    个推君
  • 【译】选择Bit.dev构建组件库的15个理由

    2019年的时候,UI组件库在普及度上有了巨大的飞跃。当然这并不多么令人惊奇,因为像Uber、Airbnb、Booking等等公司都在通过共享的UI组件来保证其...

    腾讯IVWEB团队
  • Angular开发实践(四):组件之间的交互

    在Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件...

    laixiangran

扫码关注云+社区

领取腾讯云代金券