uni-app实战之路-组件传值

电玩女神 2023-07-17 06:50 5阅读 0赞

### 文章目录 ###

*   *   *   *  写在前面
             *  什么是组件之间的传值
             *  demo
             *  解释一下过程（不是原理）
             *  项目目录
             *  uni-app的全局订阅事件

#### 写在前面 ####

> 我之前写了很多关于vue的一些文章，但是我回过头看了看竟然没有一篇文章是和组件传值有关系的，这个那么重要的知识点竟然一直没写，好吧，我的问题，这不是最近在写关于uni-app的文章嘛，就直接更新了吧。反正用法和写法是一模一样的，不过之前我写过一次vuex的文章，里面有介绍一些传值的知识，不过那个是兄弟组件之间的传值，这次这个就不写了，只写父子组件之间的。我们简单的写一个demo。

#### 什么是组件之间的传值 ####

> 我们的vue很牛皮的地方就是数据驱动和组件系统，我们的每一个vue文件其实本质也是一个组件，那么我们如果在使用组件的时候，如果有一些公共的组件需要用，这个时候我么就可能需要写一个公共的出来，这个时候每一个调用的时候可能给的值还不一样，每一个页面需求不一样的时候，自然值也会不一样，所以我们需要的是写一个可以组件可以相互通信的这样一个东西，废话不说，写demo

#### demo ####

*  新建一个组件 value\_transmit.vue

<template>
        <view>
            <text>这是{ { msg}}的博客</text>
            <button type="primary" @click="test">点击查看博客地址</button>
        </view>
    </template>
    
    <script>
        export default { 
            data() { 
                return { 
    
                };
            },
            //接收index里面的msg传递过来的值 这是子组件
            props: ["msg", "blogurl"],
            methods: { 
                test() { 
                    this.$emit("test_value", { 
                        url: this.blogurl
                    })
                }
            }
        }
    </script>
    <style>
    </style>

*  父组件 index.vue

<template>
        <view class="content">
            <view class="text-area">
                
                <valueTransmit :msg="msg" :blogurl="blogurl" @test_value="test_emit"></valueTransmit>
            </view>
        </view>
    </template>
    
    <script>
        import valueTransmit from "../../components/value_transmit.vue"
        export default { 
            data() { 
                return { 
                    title: 'Hello',
                    msg: 'clearlove',
                    blogurl: 'https://clearlove.blog.csdn.net/'
                }
            },
            onLoad() { 
    
            },
    
            methods: { 
                /** * @param {Object} val 接收组件传递过来的参数，这里可以接收参数，也可以不接收 */
                test_emit(val) { 
                    console.info(this)
                    console.info(val.url)
                    this.blogurl = val.url
                }
            },
            components: { 
                valueTransmit
            }
        }
    </script>
    
    <style>
        .content { 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    
        .logo { 
            height: 200rpx;
            width: 200rpx;
            margin-top: 200rpx;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 50rpx;
        }
    
        .text-area { 
            display: flex;
            justify-content: center;
        }
    
        .title { 
            font-size: 36rpx;
            color: #8f8f94;
        }
    </style>

*  另一个父组件 bar1.vue

<template>
        <view>
            <valueTransmit :msg="msg" :blogurl="blogurl" @test_value="test_emit"></valueTransmit>
        </view>
    </template>
    
    <script>
        import valueTransmit from "../../components/value_transmit.vue"
        export default { 
            data() { 
                return { 
                    msg: "CL",
                    blogurl: 'https:baidu.com'
                }
            },
            components: { 
                valueTransmit
            },
            methods: { 
                /** * @param {Object} val 接收组件传递过来的参数，这里可以接收参数，也可以不接收 */
                test_emit(val) { 
                    console.info(this)
                    console.info(val.url)
                    this.blogurl = val.url
                }
            }
        }
    </script>
    
    <style>
    
    </style>

*  我们看一下效果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]

#### 解释一下过程（不是原理） ####

> 其实父子组件之间的传值用法很简单，具体的原理我这里不写了，因为其实就是我写了，也是我百度粘贴过来的，我觉得没有什么意义，我什么时候彻底研究明白了原理再补充吧，这里就说一下怎么使用的，从上面的例子可以看出来，我们如果想给子组件传递一个值过去的话，我们只需要在父组件里面定义一下需要给的值，引入子组件以后呢，在子组件上面绑定一下这个值，最后在子组件里面用props接收一下，就ok了，反过来的时候子组件给父组件传值的时候需要一个类似于click的事件进行触发他， 这样使用$emit进行函数名字的绑定，将值给父组件就OK了，如果我说的比较绕，你们可以直接将我上面的源码拿过去运行就可以了，目录结构是这样的，有的人说了，你这个人真的是怎么不讲原理呢？首先我学习的思路是这样的，我会首先搞明白这个东西是什么，然后怎么用的，然后我会用一段时间，什么时候使用的炉火纯青了，这个时候我会看他的源码，实现的过程，我不喜欢上来就看源码，即使可能很多人觉得这样明白原理学的快，但是我一直认为实践出真知，这也是我为什么一直写博客都是直接自己写一个例子的原因，这样首先我可以肯定这么写是对的，其次看的人也不会因为我的表述不清晰误会用法，如果我说的不明白，可以直接拿我的源码跑就可以了，每个人的学习方法不一样，求同存异吧！最后说一下，这个uni-app的组件传值和vue的是一样的， 所以我就不写了vue的组件传值！

#### 项目目录 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]

#### uni-app的全局订阅事件 ####

[$on使用文档][on]  
这里趁着这个组件传值的机会，将这个也写一下吧。在index.vue文件的onLoad里面注册一个全局订阅的事件

onLoad() { 
    			/** * 测试一下uniapp的全局订阅的用法 */
    			// uni.$on("test_union", (rel) => { 
    			// //将传递的值打印出来
    			// console.info(rel)
    			// })
    			uni.$once("test_union", (rel) => { 
    				//将传递的值打印出来
    				console.info(rel)
    			})
    		},

在value\_transmit.vue组件中调用他，和vue不同的是这里的是uni不是this，就这点区别

//uni的全局订阅事件
    				uni.$emit("test_union",{ name : 'clearlove'})

> ok,这篇文章叫就写这么多吧，具体什么效果你们自己测试一下就直到了，就在原来的基础上加了几行代码！这里说一下，我们准备写组件的时候，直接写components，然后右键的时候就会出现新建组件的选项，你可以把它当作一个关键字看！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20230528/7568ccf1baa6430790a2f46f51e5feb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]: /images/20230528/8e1d13ec53c14c1281ab740f16be8774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]: /images/20230528/78ec641a117a49c28d7c89dcba2ea384.png
[on]: https://uniapp.dcloud.io/collocation/frame/communication?id=on