一、父组件向子组件传值
通过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
子组件;
最终结果: