vue父元件非同步傳資料到子元件
<template>中的{{cdata}}會隨著父元件的值自動更新,但是<script>中無法使用this.cdata獲取父元件非同步傳過來的值
//parent.vue <template> <child :cdata="pdata"/> </template> <script> data(){ return( pdata: '' ) }, created:( this.pdata = await getData() ), methods:{ async getData(){...} } </script>
// child.vue <template> {{cdata}} // 會根據父元件的傳值自動更新 </template> <script> props: { cdata: { types: String, defalt: '' } }, created(){ console.log(this.cdata) // undefined }, methods:{ getData(){ console.log(this.cdata) // undefined } } </script>
原因分析
在vue構建頁面的順序為,父元件構建 → 子元件構建 → 父元件獲取非同步資料 → 子元件獲取父元件非同步資料 → 子元件更新template。其中子元件的生命週期只在構建的時候發生一次。
- 父元件構建時,還沒有獲取完非同步資料,pdata是依照初始值A構建的。因此子元件執行生命週期的時候,獲取的資料也是A。
- 當父元件獲取完非同步資料B,父元件的template進行更新,資料傳遞到子元件,子元件的template自動更新,但是由於created,methods已經構建完畢,所以獲取不到資料B
解決方法
方法一:改動父元件
父元件中的資料先做非空判斷,如果是空就不初始化子元件,等父元件拿到非同步資料再初始化子元件
方法二:改動子元件
在子元件中加入watch方法,監聽父元件傳過來資料的變化。並且在watch中對資料進行進一步操作
export default {
props: {
cdata: {
types: Object,
defalt: {}
}
},
watch: {
user: function (newVal, oldVal) {
this.cdata = newVal
this.deatData() // 在此處對資料進行進一步處理
}
},
data () {
return {
cdata: {},
}
}
}
相關推薦
vue父元件非同步傳資料到子元件
<template>中的{{cdata}}會隨著父元件的值自動更新,但是<script>中無法使用this.cdata獲取父元件非同步傳過來的值 //parent.vue <template> <child :cdat
vue父組件傳值給字組件
類型 type ima 數據 src nbsp div http vue 轉自https://www.cnblogs.com/padding1015/p/7878710.html 父組件通過綁定 傳入 數據的名稱 值 子組件接收 type為數據類型 vue父
vue父向子傳值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子向父,父向子相互值</title> <script sr
vue中父元件通過props向子元件傳非同步值為空的解決方案
一、問題描述 封裝了一個highchart元件,想要複用,結果props傳值一直失敗,圖自然畫不出來,watch,mounted等鉤子函式都試過依然不行。 二、解決方案 因為父元件的值是通過axios請求獲得,當父元件拿到處理後的值時,子元件鉤子函式生命週期已經走完,即
vue 父元件向子元件傳值
Vue是一個輕量級的漸進式框架,對於它的一些特性和優點在此就不做贅述,本篇文章主要來探討一下Vue子父元件通訊的問題 首先我們先搭好開發環境,我們首先得裝好git和npm這兩個工具(如果有不清楚的同學請自行百度哦) 環境搭建步驟: 開啟git ,執行 npm insta
vue 父元件給子元件傳值
父元件Home.vue 1 <template> 2 <div> 3 <h2>這是一個首頁{{msg2}}</h2><button>按鈕</button> 4 <v-header :title="title"&
Vue學習(8)————————父子元件傳值,父元件主動獲取子元件數值方法,子元件主動獲取父元件各項,非父子元件傳值
在父元件的引用標籤裡 加入冒號屬性 <template> <div> <!--這裡冒號屬性就是寫入子元件數值--> <v-header :title="title"></v-header> <h1>新聞
vue 父元件子元件傳值
1.父元件主動獲取子元件的資料和方法 父元件中呼叫子元件的時候 定義ref <div class="main-form-body" :style="{'height':isReport == 2 ? '100%' : ''}"> <component :
vue 父元件非同步值傳遞給子元件 子元件進行資料處理
文章目錄 模擬非同步 問題描述 原因 解決 模擬非同步 父元件 <template> <div> 父元件 <child :child-data="asyncData" ><
20181129——Vue中兄弟元件互相傳值 Vuex非子父兄弟傳值
最簡單的一個列子,可以利用子元件給父元件傳值,$emit事件,父元件接收之後再給另一個子元件進行傳值 這就是我前幾天一直在看的vuex外掛 Vue的元件通過Dispatch來呼叫action,action用於存放非同步邏輯或者少量的同步邏輯,然後Actions在commit給muta
vue 父元件非同步獲取資料與子元件通訊props資料不通;
父元件非同步獲取資料時,通過props向子元件傳遞資料時資料不通。 原因可能是父元件在非同步獲取資料時使用了箭頭函式, 例: //父元件 export default{ data(){ return {
vue 自定義元件(父級,子級元件)傳參
import material from 'alert';//引入子元件,子元件路徑 export default { data() { return {} }, //註冊元件 components: { alert: alert, }
【Vue】父元件使用v-model,實現子父元件動態傳值。
前言:父元件與子元件直接的傳值會有些小問題,特別是動態傳值。 一、實現動態傳值 <body> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <
vue學習十(prop傳參、v-bind傳參、$emit向父級傳送訊息、input元件上使用 v-model、事件拋值)
基本示例 元件是可複用的 Vue 例項,且帶有一個名字:在這個例子中是 。我們可以在一個通過 new Vue 建立的 Vue 根例項中,把這個元件作為自定義元素來使用 <div id="components-demo"> <
Vue 父元件與子元件之間傳值
一、父元件與子元件之間值傳遞步驟如下: 例如:我有一個父元件Myhome.vue 和一個子元件Header.vue 1、父元件呼叫子元件的時候,動態繫結屬性值 <v-myheader :title="title"></v-myheader> 2、在子元件使用&nb
Vue中在父元件中定義子元件與父子元件間傳值
在父元件中定義子元件 我們除了定義獨立的元件之外,Vue還支援在父元件中定義子元件。 示例 原始碼 <!DOCTYPE html> <html lang="en"> <
Vue中父傳子、子傳父元件之間傳值
在Vue的框架開發的專案過程中,經常會用到元件來管理不同的功能,有一些公共的元件會被提取出來。這時必然會產生一些疑問和需求?比如一個元件呼叫另一個元件作為自己的子元件,那麼我們如何進行給子元件進行傳值呢。常見的就是父子元件,子父元件之間的傳值。父子元件的關係可以總結為 pro
vue父元件呼叫子元件,為子元件傳值,prop用法
1.父元件呼叫子元件 子元件children.vue程式碼如下: <template> <div>我是子元件</div> </template> 父元件parent.vue程式碼如下: <template>
vue父元件向子元件傳值步驟:
vue專案開發裡,必不可少都會遇到父元件向子元件傳值,下面具體說明一下父元件向子元件傳值的步驟: 一、首先需要兩個vue頁面,這裡分別新建father.vue(父元件),subComponents.vue(子元件)。 二、值肯定是定義在父元件中的,供所有子元件共享。所以要在父元件(f
vue 父元件傳值給子元件 子元件的銷燬與重置 外部呼叫自己的函式
<rolesadd @my-event="addRoles = false" :IsOfficial="IsOfficial"></rolesadd> // 父元件 :IsOfficial 子元件接收值 IsOfficial 要傳的值 props: {