uni-app中的組件之間的傳值

我們將compontents中的test文件作為子組件 引入到index中使用

引入并使用

效果如下

父?jìng)髯?/h5>

• 首先我們?cè)诟附M件中使用子組件的標(biāo)簽中去自定義title
  

• 在子組件中 通過props去接收并處理
  
  效果如下：
  

子傳父

子組件中

• 設(shè)置一個(gè)按鈕 并注冊(cè)點(diǎn)擊事件
• 在點(diǎn)擊事件中我們通過$emit 方法調(diào)用自定義事件 參數(shù)一為自定義事件名稱 參數(shù)二為傳遞的參數(shù) 在這里就是data數(shù)據(jù)中定義的name

父組件中

• 在使用子組件的上面去定義一個(gè)自定義事件并綁定函數(shù)
• 在函數(shù)中去接收參數(shù)并賦值給data中的name
• 渲染頁面

效果如下：

點(diǎn)擊按鈕后

非父子組件傳值

我們定義aa和bb兩個(gè)組件并且同時(shí)引入index中

aa組件

bb組件

效果如下：

要求點(diǎn)擊aa組件中的按鈕 將bb組件中的666改為999

bb組件中

• 我們?cè)赽組件中定義一個(gè)全局的自定義事件,自定義事件要定義在created中 其他組件才能獲取到
• 通過nui.$on 第一個(gè)參數(shù)為自定義事件名 第二個(gè)參數(shù)為 被觸發(fā)的函數(shù)

aa組件中

• 我們通過為按鈕注冊(cè)點(diǎn)擊事件
• 在事件中通過uni.$emit觸發(fā)全局的自定義事件updateNum并傳遞參數(shù)

效果如下：

點(diǎn)擊后

總結(jié)

以上是生活随笔為你收集整理的uni-app 组件传值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。