Uniapp组件传值.md

https://blog.csdn.net/syleapn/article/details/97276991

一、父组件向子组件传值

通过props来实现，子组件通过props来接收父组件传过来的值！

1、逻辑梳理

父组件中：

第一步:引入子组件；

import sonShow from '../../component/son.vue'; 第二步:在components中对子组件进行注册；

components: { sonShow }, 第三步:以标签的形式载入；通过数据绑定的形式进行传值~

子组件中：

通过props接收父组件中传过来的值；

props:["reciveUserInfo"],

2、代码展示

父组件index.vue

<script> import sonShow from '../../component/son.vue'; export default { components: { sonShow }, data() { return { userInfo: [{ "userName": "kaliwo", "age": "19" }, { "userName": "lihuahua", "age": "39" } ] } } } </script>

子组件son.vue

{{item.userName}} {{item.age}} <script> export default{ props:["reciveUserInfo"], } </script> <style> .mesg{ display: flex; flex-direction: column; align-items: center; } </style>

3、结果

四、说明

对于一些详情页，比如有时我们需要点赞数量+1，-1的效果；但是，由于子组件不能改变父组件的值，所以直接操作从父组件接收的值进行更改是没有效果的！就像如下：

 let list = that.reciveUserInfo;
    for(var i in list){
	let tempAge = list[i].age + 1;
	list[i].age = tempAge;
	that.reciveUserInfo = list;
}

年龄还是没有改变。所以应该怎么做了？

把从父组件接收到的值reciveUserInfo赋给一个新的变量mesgShow，对这个新的变量进行操作，然后用对齐进行渲染即可！

let list = that.reciveUserInfo; for(var i in list){ let tempAge = list[i].age + 1; list[i].age = tempAge; that.mesgShow = list; } 此时的结果为：age+1

附加：改变的代码：

 

二、子组件向父组件传值

与微信小程序自定义组件中子组件向父组件传值一样的逻辑，都是通过事件，下面直接上代码：

父组件index.vue

<script> import sonShow from '../../component/son.vue'; export default { components: { sonShow }, methods:{ getSonValue: function(res){ console.log("res=========",res) } } } </script>

子组件；

点我向父组件传值 <script> export default{ methods:{ sendMegToIndex: function(){ // 向父组件传值 this.$emit("send","我来自子组件") } } } </script>

最终结果：