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>
  • 我们看一下效果:
    在这里插入图片描述
    在这里插入图片描述

解释一下过程(不是原理)

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

项目目录

在这里插入图片描述

uni-app的全局订阅事件

$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,然后右键的时候就会出现新建组件的选项,你可以把它当作一个关键字看!

何处锦绣不灰堆 CSDN认证博客专家 vue nodejs git
人系于妻子舍宅,甚于牢狱。牢狱有散释之期,妻子无远离之念。情爱于色,岂惮驱驰。虽有虎口之患,心存甘伏。投泥自溺,故曰凡夫。透得此门,出尘罗汉。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值