vue2 0的父子元件資料傳遞

2022-08-23 21:06:13 字數 1391 閱讀 4573

大家都知道,父子元件的作用域是相互獨立的,那麼父子元件又是怎樣通訊的呢。vue官網上說,父元件向子元件傳遞資料使用props選項,而子元件通過events事件觸發,傳送資料給父元件

1.父元件向子元件傳遞資料

首先引入vue.js(這裡是2.2.0版本) 先將父子元件的內容展示出來

//父元件內容

//此處元素有且只有乙個,2.0以上版本規定,元件的根元素有且只有乙個

}

//子元件內容

//此處元素有且只有乙個,2.0以上版本規定,元件的根元素有且只有乙個

}

以下是瀏覽器渲染的效果圖:

現在我想,讓子元件獲取到父元件中parentmsg資料,只需兩步:

1.父元件將資料傳遞給props橋梁

2.props將資料傳遞給子元件

所以,首先,子元件要宣告自己需要父元件的哪個資料,

//父元件內容

}//通過get-parent屬性繫結父元件的parentmsg資料

var child=

},props:['getparent'],//通過props宣告自己所要的資料

template:"#child"

}在子元件中呼叫父元件資料

//子元件內容

}獲取父元件的資料-->}

然後瀏覽器的渲染結果如下:

紅色箭頭處 就睡獲取到的父元件資料

今天就先說到這裡,只講了父元件向子元件傳遞資料,接下裡會說子元件向元件傳遞資料,歡迎噴子們噴我哦

vue元件資料傳遞

1.父元件向子元件傳遞資料 通過props 2.子元件向父元件傳遞資料 通過自定義事件 3.平行元件通訊 建立bus例項,通過bus掛載 on 和呼叫 emit 事件 1.例項化乙個bus物件 const bus new vue 事件匯流排 bus vue.component b template ...

vue2 0子元件修改父元件資料

從vue1.0公升級至2.0之後 prop的.sync被去除 因此直接在子元件修改父元件的值是會報錯的 目的是為了阻止子元件影響父元件的資料 那麼在vue2.0之後 如何在子元件修改父元件props傳過來的值呢?思路是通過子元件 emit發射乙個方法 emit increment val 在父元件使...

vue2 0父子元件及非父子元件通訊

1.父元件傳遞資料給子元件 父元件資料可以通過props屬性來傳給子元件 父元件 parent msg 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 2.子元件與父元件通訊 如果子元件想要改變資料呢?這...