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