vue如何通過props方式在子組件中獲取相應的對象
更新時間：2022年04月20日 11:20:08 作者：epines
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
這些方法主要是在這次做項目的過程中發(fā)現(xiàn)總結的來的，感覺也挺常用的，所以就簡單的記錄一下，希望下次不會再犯同樣的錯誤。
子組件定義props，父組件傳入數(shù)據(jù)，子組件在js中獲取的時候使用，如果是在html里面，可以直接把變量渲染上去。
我就直接從代碼上面來進行
js代碼：
//子組件中，定義傳入的變量的類型等
props: {
data: {
type: Array,
require: true
},
status: {
type: Boolean,
require: false
}
}我們可以直接在生命周期函數(shù)里面打印props
mounted(){
let _this=this;
console.log(_this._props,9999);
}
方法一
所以就可以直接拿取
mounted() {
? ? ?let _this=this;
? ? ?let {datas,status}=_this._props;
? ? ?console.log(datas,999999);
? ?},方法二
有時候會獲取不到,可以用一個定時器來獲取
? ?mounted() {
? ? ?let _this=this;
? ? ?let {datas,status}=_this._props;
? ? ?setTimeout(()=>{
? ? ? ?console.log(this._props)
? ? ? ?console.log(datas,111111)
? ? ?},2000)
? ?}方法三
深拷貝
? ?mounted() {
? ? ?let _this=this;
? ? ? let props = {..._this._props};
? ? ? console.log(props,"props.......")
? ?},方法四
利用watch監(jiān)聽
//直接監(jiān)聽data，因為這里的props的變量名為data ??
watch:{
? ? ?data(newData,prevData){
? ? ? ?console.log(newData,123654789)
? ? ?}
? ?}
沒錯啊，我的data就是一個數(shù)組。
在這四種方法的逐級使用下，終于獲取到了我想要的data。
其實其他幾種都是可以的，只是不知道為什么在這次項目中的某個地方，前面幾種都失效了，（其他地方是成功的），可能是因為我有毒吧 ╭(╯ε╰)╮。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue data引入本地圖片的兩種方式小結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)樹形表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue計算屬性時v-for處理數(shù)組時遇到的一個bug問題
這篇文章主要介紹了在做vue計算屬性，v-for處理數(shù)組時遇到的一個bug 問題,需要的朋友可以參考下2018-01-01
最近項目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關于el-popover如何通過js手動控制彈出框顯示、隱藏的相關資料,需要的朋友可以參考下2023-12-12
在瀏覽器中,Vue3編輯器自帶默認右鍵菜單,然而,在Electron桌面應用中,這一功能需自行編寫代碼實現(xiàn),本文詳細介紹了如何在Vue3中手動實現(xiàn)右鍵菜單的編輯、復制、粘貼功能,并提供了代碼示例,更多細節(jié)和相關教程可參考腳本之家的其他文章2024-10-10
這篇文章主要介紹了詳解vue 組件的實現(xiàn)原理，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Vue富文本的實現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關于vue實現(xiàn)富文本編輯器的相關資料,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
在vue.config.js中優(yōu)化webpack配置的方法
在日常開發(fā)中我們離不開打包工具webpack,但是不同的配置會影響我們項目的運行構建時間,也會影響打包之后項目包的大小,這篇文章記錄一下我使用過的可以優(yōu)化webpack的配置,需要的朋友可以參考下2024-05-05