Vue選項之propsData傳遞數(shù)據(jù)方式
更新時間：2022年10月18日 10:22:18 作者：落葉~
這篇文章主要介紹了Vue選項之propsData傳遞數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue選項
propsData進(jìn)行傳遞數(shù)據(jù)
使用全局?jǐn)U展器時可以利用propsData傳遞數(shù)據(jù)
先自定義header標(biāo)簽，利用Vue.extend進(jìn)行擴(kuò)展構(gòu)造器，往擴(kuò)展構(gòu)造器傳遞數(shù)據(jù)時，需要在掛載時調(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.傳遞時用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>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何解決this.$refs.form.validate()不執(zhí)行的問題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue基礎(chǔ)之MVVM,模板語法和數(shù)據(jù)綁定
這篇文章主要為大家介紹了Vue之MVVM,模板語法和數(shù)據(jù)綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
本片文章是小編在網(wǎng)上整理的關(guān)于VUEX進(jìn)階的相關(guān)知識點內(nèi)容，對此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-05-05
Vue基于el-breadcrumb實現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實現(xiàn)面包屑功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之處理表單,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue中axios的使用與封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue中使用iconfont圖標(biāo)的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項
這篇文章主要介紹了解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項目上線白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue生成二維碼QR?Code的簡單實現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了vue3選項式api如何監(jiān)控數(shù)組變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06