父組件
<template>
<button @click="handleClick">點擊給子組件傳遞信息</button>
<div>
// 導入組件
<ZlList :huilistSetting="huilistSetting"></ZlList>
</div>
</template>
// 引入
<script>
import ZlList from '@/view/components/zl_info.vue'
export default {
// 注冊組件
components: {
ZlList
},
data () {
// 默認值
huilistSetting: {
show: false,
loading: false,
index: 0
}
},
methods: {
handleClick () {
this.huilistSetting.show = true
}
}
}
</script>這樣就可以在子組件中通過 huilistSetting 訪問父組件傳遞過來的 huilistSetting 對象了。
子組件
<template>
<div>
{{huilistSetting}}
</div>
</template>
<script>
export default {
props: {
// 定義傳遞的值
huilistSetting: {
type: Object,
default: {
show: false,
loading: false,
index: 0
}
}
},
}
</script>這里我們使用的是相對路徑引入?zl_info.vue?子組件。然后，在?components?選項中注冊該子組件，這樣父組件就可以在模板中使用子組件了。
當子組件需要的默認值是一個對象類型時，需要注意幾點：
1. 在父組件中定義默認值時，要使用函數(shù)返回默認值，以避免默認值是一個引用類型的問題，確定每個組件實例的數(shù)據(jù)源來自不同的數(shù)據(jù)源。
2. 在子組件的 Props 中要設置默認值。否則，在初始化的時候，如果父組件沒有傳入這些 props，就會得到一個 undefined 的值。
在這個例子中，當父組件沒有傳遞show 屬性時，子組件會使用 `default` 中定義的默認值。若父組件傳遞了 show 屬性，則子組件會使用父組件傳遞的值，而不是使用 `default` 中定義的默認值。
例如，在父組件中使用<ZlList :huilistSetting="huilistSetting"></ZlList>標簽就可以渲染?ChildComponent?了。注意：標簽名稱必須和子組件的名稱相同，這里的名稱是?ZlList?
注意，在使用?import?引入組件時，需要使用正確的路徑引入該組件文件。文章來源：http://www.zghlxwxcb.cn/news/detail-438676.html
希望這些信息對您有所幫助！文章來源地址http://www.zghlxwxcb.cn/news/detail-438676.html
到了這里，關于vue2 iview 中父組件傳遞對象給子組件的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
