uni-app中vue组件传值


一、父组件向子组件传值

通过props来实现,子组件通过props来接收父组件传过来的值!

1、逻辑梳理

父组件中:


第一步:引入子组件;

import sonShow from '../../component/son.vue';

第二步:在components中对子组件进行注册;

  components: {
    sonShow
  },

第三步:以标签的形式载入;通过数据绑定的形式进行传值~

<son-show :reciveUserInfo="userInfo"></son-show>


子组件中:


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

props:["reciveUserInfo"],

 

2、代码展示

父组件index.vue

 

子组件son.vue

 

3、结果

 

四、说明

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

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

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

 

此时的结果为:age+1

附加:改变的代码:

 

二、子组件向父组件传值

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

父组件index.vue

 

子组件;

 

最终结果:


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM