写在前面
我之前写了很多关于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，然后右键的时候就会出现新建组件的选项，你可以把它当作一个关键字看！
