所以我与vue的父子组件通信存在问题。关键是，在导航到组件后，它应该调用ajax从服务器获取数据。接收到数据后，父组件应该通过props将其发送给所有子组件，但是props数据没有显示。仅当我在编辑器上更改代码后，子组件才开始显示道具数据。 所以，这是我的父组件的代码
<template>
<div id="single-product-container">
<product-header :name="singleProductName" :details="singleProductDetail" />
<product-spec :spec="singleProductSpec" />
</div>
</template>
<script>
import SingleProductHeader from '@/pages/SingleProductPage/single-product-header'
import SingleProductSpec from '@/pages/SingleProductPage/single-product-spec'
import singleProductApi from '@/api/product.api'
export default {
data () {
return {
singleProductData: null,
singleProductDetail: [],
singleProductName: '',
singleProductSpec: null
}
},
methods: {
getAllSingleProductDetail () {
const productName = this.$route.params.product
const location = this.location || 'jakarta'
let vehicleType = null
const path = this.$route.fullPath
let self = this
if (path.includes('motorcycle')) {
vehicleType = 'motorcycle'
} else if (path.includes('car')) {
vehicleType = 'car'
}
singleProductApi.getSingleProductRequest(location, productName, vehicleType)
.then(singleProductResponse => {
console.log(singleProductResponse)
let specObj = singleProductResponse.specification
self.singleProductDetail = singleProductResponse.detail
self.singleProductName = singleProductResponse.product_name
self.singleProductSpec = specObj
self.singleProductData = singleProductResponse
})
.catch(error => {
throw error
})
}
},
mounted () {
document.title = this.$route.params.product
},
created () {
this.getAllSingleProductDetail()
},
components: {
'product-header': SingleProductHeader,
'product-spec': SingleProductSpec
}
}
</script>
这是我的单一产品规格组件，不会加载道具数据：
<template>
<div id="product-spec">
<div class="product-spec-title">
Spesifikasi
</div>
<div class="produk-laris-wrapper">
<div class="tab-navigation-wrapper tab-navigation-default">
<div class="tab-navigation tab-default" v-bind:class="{ 'active-default': mesinActive}" v-on:click="openSpaceTab(event, 'mesin')">
<p class="tab-text tab-text-default">Mesin</p>
</div>
<div class="tab-navigation tab-default" v-bind:class="{ 'active-default': rangkaActive}" v-on:click="openSpaceTab(event, 'rangka')">
<p class="tab-text tab-text-default">Rangka & Kaki</p>
</div>
<div class="tab-navigation tab-default" v-bind:class="{ 'active-default': dimensiActive}" v-on:click="openSpaceTab(event, 'dimensi')">
<p class="tab-text tab-text-default">Dimensi & Berat</p>
</div>
<div class="tab-navigation tab-default" v-bind:class="{ 'active-default': kapasitasActive}" v-on:click="openSpaceTab(event, 'kapasitas')">
<p class="tab-text tab-text-default">Kapasitas</p>
</div>
<div class="tab-navigation tab-default" v-bind:class="{ 'active-default': kelistrikanActive}" v-on:click="openSpaceTab(event, 'kelistrikan')">
<p class="tab-text tab-text-default">Kelistrikan</p>
</div>
</div>
<div id="tab-1" class="spec-tab-panel" v-bind:style="{ display: mesinTab }">
<table class="spec-table">
<tbody>
<tr class="spec-row" v-for="(value, name) in mesinData" :key="name">
<td> {{ name }} </td>
<td> {{ value }} </td>
</tr>
</tbody>
</table>
</div>
<div id="tab-2" class="spec-tab-panel" v-bind:style="{ display: rangkaTab }">
<table class="spec-table">
<tbody>
<tr class="spec-row" v-for="(value, name) in rangkaData" :key="name">
<td> {{ name }} </td>
<td> {{ value }} </td>
</tr>
</tbody>
</table>
</div>
<div id="tab-3" class="spec-tab-panel" v-bind:style="{ display: dimensiTab }">
<table class="spec-table">
<tbody>
<tr class="spec-row" v-for="(value, name) in dimensiData" :key="name">
<td> {{ name }} </td>
<td> {{ value }} </td>
</tr>
</tbody>
</table>
</div>
<div id="tab-4" class="spec-tab-panel" v-bind:style="{ display: kapasitasTab }">
<table class="spec-table">
<tbody>
<tr class="spec-row" v-for="(value, name) in kapasitasData" :key="name">
<td> {{ name }} </td>
<td> {{ value }} </td>
</tr>
</tbody>
</table>
</div>
<div id="tab-5" class="spec-tab-panel" v-bind:style="{ display: kelistrikanTab }">
<table class="spec-table">
<tbody>
<tr class="spec-row" v-for="(value, name) in kelistrikanData" :key="name">
<td> {{ name }} </td>
<td> {{ value }} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
location: String,
spec: Object
},
data () {
return {
mesinActive: true,
rangkaActive: false,
dimensiActive: false,
kapasitasActive: false,
kelistrikanActive: false,
mesinTab: 'block',
rangkaTab: 'none',
dimensiTab: 'none',
kapasitasTab: 'none',
kelistrikanTab: 'none',
mesinData: {},
rangkaData: {},
dimensiData: {},
kapasitasData: {},
kelistrikanData: {}
}
},
methods: {
openSpaceTab (evt, tab) {
if (tab === 'mesin') {
this.mesinActive = true
this.rangkaActive = false
this.dimensiActive = false
this.kapasitasActive = false
this.kelistrikanActive = false
this.mesinTab = 'block'
this.rangkaTab = 'none'
this.dimensiTab = 'none'
this.kapasitasTab = 'none'
this.kelistrikanTab = 'none'
} else if (tab === 'rangka') {
this.mesinActive = false
this.rangkaActive = true
this.dimensiActive = false
this.kapasitasActive = false
this.kelistrikanActive = false
this.mesinTab = 'none'
this.rangkaTab = 'block'
this.dimensiTab = 'none'
this.kapasitasTab = 'none'
this.kelistrikanTab = 'none'
} else if (tab === 'dimensi') {
this.mesinActive = false
this.rangkaActive = false
this.dimensiActive = true
this.kapasitasActive = false
this.kelistrikanActive = false
this.mesinTab = 'none'
this.rangkaTab = 'none'
this.dimensiTab = 'block'
this.kapasitasTab = 'none'
this.kelistrikanTab = 'none'
} else if (tab === 'kapasitas') {
this.mesinActive = false
this.rangkaActive = false
this.dimensiActive = false
this.kapasitasActive = true
this.kelistrikanActive = false
this.mesinTab = 'none'
this.rangkaTab = 'none'
this.dimensiTab = 'none'
this.kapasitasTab = 'block'
this.kelistrikanTab = 'none'
} else if (tab === 'kelistrikan') {
this.mesinActive = false
this.rangkaActive = false
this.dimensiActive = false
this.kapasitasActive = false
this.kelistrikanActive = true
this.mesinTab = 'none'
this.rangkaTab = 'none'
this.dimensiTab = 'none'
this.kapasitasTab = 'none'
this.kelistrikanTab = 'block'
}
}
},
created () {
this.mesinData = this.spec.mesin
this.rangkaData = this.spec.rangka
this.dimensiData = this.spec.dimensi
this.kapasitasData = this.spec.kapasitas
this.kelistrikanData = this.spec.kelistrikan
}
}
</script>
正如我所说，我的单一产品规格组件的唯一问题不是它不会加载props数据。问题是，当我在文本编辑器中更改代码时，它仅加载props数据（很奇怪，我知道）。当我开始调试时，我开始意识到这一点，当我在单一产品规格组件中更改代码时，props数据便开始加载。而且，如果我不更改我的单一产品规格组件代码，则无论等待多长时间，道具数据都不会加载。
答案 0 :(得分：2)
好的，让我们逐步了解一下发生的情况：
created钩子并从服务器启动了数据加载。spec的prop值为null，因为尚未加载数据，而singleProductSpec仍为null。created的{{1}}挂钩。由于single-product-spec是this.spec，所以我想这会引发错误，尽管问题中未提及任何错误。null的值。它是父组件的渲染依赖项，因此该组件将被添加到渲染队列中。singleProductSpec的新值将作为singleProductSpec道具传递给spec。不会不会创建新的single-product-spec实例，它将重新使用最初创建的实例。到那时，其他任何事情都不会发生。 single-product-spec的{{1}}钩子不会重新运行，因为它不是刚刚创建的。
在编辑子组件的源代码时，它将触发该组件的热重装。此类更改的确切效果会有所不同，但通常会导致重新创建子级而不重新创建父级。由于父级已经从服务器加载了数据，因此将为新创建的子级传递完全填充的created值。这样就可以在single-product-spec挂钩中对其进行读取。
有多种解决方法。
首先，我们可以避免在数据准备就绪之前创建spec：
created这将只是避免在初始渲染期间创建组件，以便在运行孩子的single-product-spec挂钩时，它可以访问所需的数据。这可能是您应该使用的方法。
第二种方法是使用<product-spec v-if="singleProductSpec" :spec="singleProductSpec" />
。密钥用于在重新渲染时配对组件，以便Vue知道哪个旧组件与哪个新组件匹配。如果created发生变化，则Vue将丢弃旧的子组件，而是创建一个新的子组件。创建新组件后，它将运行key挂钩。这可能不是您所用方案的最佳方法，因为尚不清楚子组件在传递key中的created时应该做什么。
第三种方法是在子组件中使用spec。这将监视null的值何时更改，并将相关值复制到组件的本地数据属性。在某些情况下，使用watch这样的方法是适当的，它通常表明组件设计中存在潜在的弱点。
但是，您的代码中还有其他问题...
spec钩子，而只需要在watch函数中使用它即可。参见https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow。created和data都表示相同的基础数据。 mesinActive中不应同时包含两者。至少应该是一个计算属性，尽管我个人可能会完全放弃mesinTab。而是使用CSS类来应用相关的样式，而只需使用data来决定要应用哪些类（就像在其他地方一样）。显然，其他mesinTab / mesinActive属性也是如此。xActive与箭头功能一起使用。 xTab的值保留在周围的范围内。正确实现let self = this的代码应该折叠到几乎没有内容。您应该能够摆脱大约80％的代码。如果您只是使用适当的数据结构来保存所有数据，我希望方法this是单线的。
更新：
根据要求，这里是您组件的重写，其中考虑了我答案的“其他问题”部分中的1-4点。
single-product-specopenSpaceTabconst ProductSpecTitle = {
template: `
<div>
<div class="product-spec-title">
Spesifikasi
</div>
<div class="produk-laris-wrapper">
<div class="tab-navigation-wrapper tab-navigation-default">
<div
v-for="tab of tabs"
:key="tab.id"
class="tab-navigation tab-default"
:class="{ 'active-default': tab.active }"
@click="openSpaceTab(tab.id)"
>
<p class="tab-text tab-text-default">{{ tab.text }}</p>
</div>
</div>
<div
v-for="tab in tabs"
class="spec-tab-panel"
:class="{ 'spec-tab-panel-active': tab.active }"
>
<table class="spec-table">
<tbody>
<tr
v-for="(value, name) in tab.data"
:key="name"
class="spec-row"
>
<td> {{ name }} </td>
<td> {{ value }} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`,
props: {
spec: Object
},
data () {
return {
selectedTab: 'mesin'
}
},
computed: {
tabs () {
const tabs = [
{ id: 'mesin', text: 'Mesin' },
{ id: 'rangka', text: 'Rangka & Kaki' },
{ id: 'dimensi', text: 'Dimensi & Berat' },
{ id: 'kapasitas', text: 'Kapasitas' },
{ id: 'kelistrikan', text: 'Kelistrikan' }
]
for (const tab of tabs) {
tab.active = tab.id === this.selectedTab
tab.data = this.spec[tab.id]
}
return tabs
}
},
methods: {
openSpaceTab (tab) {
this.selectedTab = tab
}
}
}
new Vue({
el: '#app',
components: {
ProductSpecTitle
},
data () {
return {
spec: {
mesin: { a: 1, b: 2 },
rangka: { c: 3, d: 4 },
dimensi: { e: 5, f: 6 },
kapasitas: { g: 7, h: 8 },
kelistrikan: { i: 9, j: 10 }
}
}
}
})