tft每日頭條

 > 生活

 > vue父組件怎樣傳遞數據給子組件

vue父組件怎樣傳遞數據給子組件

生活 更新时间:2024-07-17 08:19:46

vue父組件怎樣傳遞數據給子組件?父組件向子組件傳值：，今天小編就來說說關于vue父組件怎樣傳遞數據給子組件?下面更多詳細答案一起來看看吧!

vue父組件怎樣傳遞數據給子組件（vue父子組件和非父子組件間的傳值）1

vue父組件怎樣傳遞數據給子組件

父組件向子組件傳值：

  1. 父組件的data中定義值；
  2. 父組件中調用、注冊、引用子組件；
  3. 在父‬組件‬引用子‬組件‬的标簽上給子組件傳值，：[子組件props中創建的屬性]=“父‬組件‬data中‬定義‬的需要‬傳‬給‬子‬組件‬的‬變量名‬”；
  4. 子組件在props中創建一個屬性，用以接收父組件傳過來的值。

子組件向父組件傳值：

  1. 子組件中使用$emit（‘父‬組‬件‬接收‬子‬組件‬值‬的‬事件‬名‬’，子‬組件‬傳‬給‬父‬組‬件‬的‬值‬）方法向父組件傳值；
  2. 在父組件引用子組件的标簽‬上使用@父組件接收子組件的事件名=“事件”接收值；
  3. 父組件的methods中，事件（接收的值）｛｝。

非父子組件間的傳值

  1. 在main.js中注冊全局的變量Vue.prototype.變量‬=new Vue()；
  2. 在要傳遞數據的組件中使用 this.變量.$emit(‘自定義事件名’,‬‬‬data)methods:{ btnClick(){ this.變量‬.$emit('自定義‬事件‬名‬', ‬‬‬‬this.msg) } }；
  3. 接受數據的組件中使用 this.變量.$on(“自定義事件名”, msg => {})mounted() { this.變量‬.$on("自定義‬事件名", msg => { this.message = msg; }); }。
,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
查看全部
上一页 下一页
江西全套精煉油設備
周冬雨身材上有什麼不...

相关生活资讯推荐

热门生活资讯推荐

网友关注

關于
條款和條件 隱私政策 Cookie 設置
服務
登陸 注冊 聯系我們
tft每日頭條 美食 生活 職場 母嬰 時尚 科技 汽車
友情鏈接
zpostcode Recruit weather mreligion Yellowpages sport constellation shopping name game directory literature Word tour furnish Lottery tftnews lyrics News digital car dir Edu Finance
Copyright 2023-2024 - www.tftnews.com All Rights Reserved