Vue選項(xiàng)之propsData傳遞數(shù)據(jù)方式
Vue選項(xiàng)
propsData進(jìn)行傳遞數(shù)據(jù)
使用全局?jǐn)U展器時(shí)可以利用propsData傳遞數(shù)據(jù)
先自定義header標(biāo)簽,利用Vue.extend進(jìn)行擴(kuò)展構(gòu)造器,往擴(kuò)展構(gòu)造器傳遞數(shù)據(jù)時(shí),需要在掛載時(shí)調(diào)用propsData傳遞數(shù)據(jù)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>propsData屬性</title> <script src="../assets/js/vue.js"></script> </head> <body> <header></header> <script type="text/javascript"> var demo=Vue.extend({ template:`<p style="color:red">這是利用propsData傳遞數(shù)據(jù)-----{{demo}}---{{a}}</p>`, data:function(){ return{ demo:'這里采用了插值的方式' } }, props:['a'] }); new demo({propsData:{a:'propsData設(shè)置值'}}).$mount('header') </script> </body> </html>
運(yùn)行結(jié)果:
附加:
propsData三步解決傳值:
1.在全局?jǐn)U展里加入props進(jìn)行接收。propsData:{a:1}
2.傳遞時(shí)用propsData進(jìn)行傳遞。props:[‘a’]
3.用插值的形式寫入模板。{{ a }}
Vue.extend全局?jǐn)U展的數(shù)據(jù)傳遞propsData
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <header></header> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> var header_t = Vue.extend({ template: ` <div>header_t {{ a }}</div> `, props: ['a'] }); new header_t({propsData: {a: 1}}).$mount('header'); </script> </body> </html>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù)
這篇文章主要介紹了Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10ant?design?vue?pro?支持多頁簽?zāi)J絾栴}
這篇文章主要介紹了ant?design?vue?pro?支持多頁簽?zāi)J絾栴},具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11