vue prop屬性傳值與傳引用示例

vue組件在prop里根據(jù)type決定傳值還是傳引用。

簡(jiǎn)要如下：

傳值：String、Number、Boolean

傳引用：Array、Object

若想將數(shù)組或?qū)ο箢?lèi)型也以值形式傳遞怎么辦呢？如下方式可以實(shí)現(xiàn)：

// component-A 引用component-B組件

:personBak="person_Bak">

// component-A 部分關(guān)鍵代碼

// 將數(shù)組復(fù)制，personBak與personList是兩個(gè)“內(nèi)容”相同但地址不一樣的對(duì)象(數(shù)組),

// 這樣可以變相的實(shí)現(xiàn)“傳值”，person或personBak互不影響

person_Bak = JSON.parse(JSON.stringfy(this.personList));

//component-B props部分

props: {

person: {

type: Object,

default: {}

},

personBak: {

type: Object,

default: {}

}

}

以上這篇vue prop屬性傳值與傳引用示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持我們。

時(shí)間： 2019-11-11

vue-prop是父組件向子組件進(jìn)行傳遞數(shù)據(jù)時(shí)使用的. 例如子組件為 child.vue template: '

msg: {{msg}}' props: ['msg'], 我們?cè)谧咏M件里規(guī)定了一個(gè)數(shù)據(jù)名字叫msg 父組件里面寫(xiě) 這樣我們就可以在子組件里看到msg:hello, vue.js! 以上這篇vue-prop父組件向子組件進(jìn)行傳值的方法

先定義一個(gè)子組件,在組件中注冊(cè)props

{{message}}(子組件) 在父組件中,引入

如下所示:

Title Vue.component("test", { props: ['type'], template: '

先說(shuō)問(wèn)題,父組件利用props向子組件傳值,瀏覽器 console 有這個(gè)值,但是獲取不到內(nèi)部的屬性,困了我3個(gè)小時(shí),真的** personal console 以下為原代碼 1.home.vue(父組件)--personal是被傳的參數(shù) export default

在Vue中,父子組件傳值,子組件通過(guò)props接收父組件傳遞的數(shù)據(jù) 父組件 questionList :傳遞數(shù)據(jù)參數(shù) questionsLists: 傳遞數(shù)據(jù)源 子組件 porps 接收父組件方式有倆中,一種是通過(guò)對(duì)象形式,一種是通過(guò)數(shù)組形式,通過(guò)數(shù)組形式接收多個(gè)數(shù)據(jù)時(shí)用逗號(hào)隔開(kāi)即可.比如:props:['a','b']. 需要注意的是在子組件中 接收父組件的數(shù)據(jù)參數(shù),必須和父組件傳遞時(shí)的 參數(shù)一致,上圖中的 questionList 這種情況下會(huì)出現(xiàn)這么一個(gè)情況,刷新頁(yè)面之后子組件接收的父組件

一.父組件向子組件傳遞數(shù)據(jù) 在 Vue 中,可以使用props向子組件傳遞數(shù)據(jù). 子組件部分: 這是 header.vue 的 HTML 部分,logo 是在 data 中定義的變量. 如果需要從父組件獲取 logo 的值,就需要使用props: ['logo'] 在 props 中添加了元素之后,就不需要在 data 中再添加變量了 父組件部分: 在調(diào)用組件的時(shí)候,使用 v-bind 將 logo 的值綁定為 App.vue 中定義的變量 logoMsg 然后就能將App.vue中 logoM

最近做項(xiàng)目,需要用到vue,后臺(tái)是php,第一次使用axios進(jìn)行請(qǐng)求,本以為同ajax一樣,會(huì)很簡(jiǎn)單,但是結(jié)果往往不讓人滿(mǎn)意啊,get請(qǐng)求很簡(jiǎn)單,這里就不說(shuō)了,主要說(shuō)下 post請(qǐng)求方式. 使用axios進(jìn)行post請(qǐng)求,后臺(tái)居然接收不到數(shù)據(jù),這就納悶了,于是網(wǎng)上一頓搜索,現(xiàn)在將所用的解決辦法給大家說(shuō)下: 1.new URLSearchParams方式 起初使用params.append("屬性名":屬性值)的方式,對(duì)于簡(jiǎn)單的數(shù)據(jù)傳遞這樣是沒(méi)有問(wèn)題的,后臺(tái)可以正常接收數(shù)據(jù),但我發(fā)現(xiàn)一

本文實(shí)例講述了vue組件通信傳值操作.分享給大家供大家參考,具體如下: 父子組件通信: 子組件

我是子組件一

{{parentMessage}}

直接上代碼,以下 window.setTimeout(function(){ if(this && !this._isDestroyed){ //_isDestroyed 組件是否被銷(xiāo)毀 return; } window.location.href = "/serverMonitor?t="+ new Date().getTime(); },5000) 很粗暴的方法,在執(zhí)行之前看是否被銷(xiāo)毀就行, 第二種方法,調(diào)用路由組件內(nèi)的鉤子函數(shù)beforeRouteLeave be

在項(xiàng)目中運(yùn)行v-for代碼段時(shí),

最近使用vue學(xué)習(xí)開(kāi)發(fā)移動(dòng)端的項(xiàng)目,使用了bette-scroll插件做滾動(dòng).在引入better-scroll的組件中使用@click事件的時(shí)候,點(diǎn)擊事件失效,v-on:click.v-bind:click.@click.native都不行,試了一下@touchstart是卻是可以的,發(fā)現(xiàn)better-scroll的配置中沒(méi)有設(shè)置click:true,設(shè)置過(guò)之后click事件成功. 后來(lái)在使用vuex的時(shí)候一直報(bào)"[vuex] unknown mutation type: changeCity&

這里面我們需要注意一個(gè)問(wèn)題,就是 template (將要渲染的HTML)必須是包含在一個(gè)標(biāo)簽里面的,這個(gè)和react 比較像,是個(gè)小坑,所以他沒(méi)有報(bào)錯(cuò): 最外層加個(gè)標(biāo)簽包起來(lái)就行 補(bǔ)充知識(shí):vue自定義組件無(wú)法渲染的可能原因 1.組件最外層需要Vue實(shí)例包裹 2.組件名不支持駝峰命名,建議采用-分隔 如:myTabButton 改為 my-tab-button 以上這篇解決vue組件沒(méi)顯示,沒(méi)起作用,沒(méi)報(bào)錯(cuò),但該顯示的組件沒(méi)顯示問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大

遇到的問(wèn)題 最近在開(kāi)發(fā)一個(gè)Vue的項(xiàng)目,好幾個(gè)頁(yè)面都有用到一個(gè) 頁(yè)面樓層滑動(dòng)的組件,我就直接封裝成了一個(gè),但是遇到一個(gè)bug,就是我需要得到這個(gè)組件的offsetTop,然后頁(yè)面滾動(dòng)到這個(gè)位置的時(shí)候,就設(shè)置position屬性為fixed,讓他固定在屏幕上.問(wèn)題是當(dāng)我在mounted鉤子函數(shù)中獲取offsetTop的時(shí)候,在新開(kāi)的頁(yè)簽中打開(kāi)頁(yè)面,會(huì)得到錯(cuò)誤的offsetTop,但是在當(dāng)前頁(yè)面刷新,就不會(huì)有問(wèn)題. 定位問(wèn)題 后來(lái)查到問(wèn)題,就是加載的問(wèn)題,新窗口打開(kāi)圖片,默認(rèn)是沒(méi)有帶緩存的,圖片是G

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue中传值和传引用_vue prop属性传值与传引用示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。