快捷導(dǎo)航

Vue選項(xiàng)之propsData傳遞數(shù)據(jù)方式

更新時(shí)間：2022年10月18日 10:22:18 作者：落葉~

這篇文章主要介紹了Vue選項(xiàng)之propsData傳遞數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)文章

如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-09-09
Vue基礎(chǔ)之MVVM,模板語(yǔ)法和數(shù)據(jù)綁定
這篇文章主要為大家介紹了Vue之MVVM,模板語(yǔ)法和數(shù)據(jù)綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
vuex進(jìn)階知識(shí)點(diǎn)鞏固
本片文章是小編在網(wǎng)上整理的關(guān)于VUEX進(jìn)階的相關(guān)知識(shí)點(diǎn)內(nèi)容，對(duì)此有興趣的朋友可以跟著學(xué)習(xí)參考下。
2018-05-05
Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
Vue.JS入門教程之處理表單
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之處理表單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
詳解vue中axios的使用與封裝
這篇文章主要介紹了vue中axios的使用與封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue中使用iconfont圖標(biāo)的過(guò)程
這篇文章主要介紹了vue中使用iconfont圖標(biāo)的過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)
這篇文章主要介紹了解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)目上線白屏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue生成二維碼QR?Code的簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實(shí)現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06