计数子组件的出现情况
计数子组件的出现情况
提问于 2018-04-26 16:12:14
我有一个这样的文件组件：
<template>
<div>
<template v-if="offers.length > 3">
<a href="#">View all offers here</a>
</template>
<template v-else-if="offers.length > 1">
<offer v-for="offer in offers" :data="offer"></offer>
</template>
<template v-else-if="offers.length == 1">
<offer :title="The offer" :data="offers[0]"></offer>
</template>
</div>
</template>根据offers的数量，我选择要呈现多少个。
问题：如何有效地获取/计数<offer>组件的数量？我也需要那个号码是被动的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-26 17:22:47
没有干净的方法。
您可以计算属于特定类型的当前实例的子实例。但是，您必须在update钩子(以及mounted)上调用"recount“逻辑。
示例：
Vue.component('offer', {
name: 'Offer',
template: '<span> offer </span>'
})
new Vue({
el: '#app',
data: {
offers: [1, 2],
offerCount: 0
},
methods: {
updateOfferCount() {
this.offerCount = this.$children.filter(child => child.constructor.options.name === 'Offer').length;
}
},
updated() {
this.updateOfferCount()
},
mounted() {
this.updateOfferCount()
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<div>
<template v-if="offers.length > 3">
<a href="#">View all offers here</a>
</template>
<template v-else-if="offers.length > 1">
<offer v-for="offer in offers" :data="offer"></offer>
</template>
<template v-else-if="offers.length == 1">
<offer :data="offers[0]"></offer>
</template>
</div>
<br>
<button @click="offers.push(123)">Add Offer</button> offerCount: {{ offerCount }}
</div>
Stack Overflow用户
发布于 2018-04-26 17:09:11
我之所以回答这个问题，完全是因为您想要计算Offer组件的实例化和析构。我不知道你为什么不算offers.length。也许其他东西可以触发实例化。
让组件在创建和销毁时发出事件，并相应地具有父跟踪。
或者(也可能是过火)，您可以使用维克斯并创建一个Offer在创建和销毁时提交给它的存储。这意味着您不必每次在标记中添加@offer-created/destroyed指令时都手动附加<offer>指令。
这两种方法都包含在以下示例中：
const store = new Vuex.Store({
strict: true,
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
}
}
});
const Offer = {
props: ["data"],
template: "<div>{{data.name}}</div>",
created() {
console.log("Created");
this.$emit("offer-created");
this.$store.commit("increment");
},
destroyed() {
console.log("Destroyed");
this.$emit("offer-destroyed");
this.$store.commit("decrement");
}
};
const app = new Vue({
el: "#app",
store,
components: {
offer: Offer
},
data() {
return {
offers: [],
offerCount: 0
};
},
computed: {
offerCountFromStore() {
return this.$store.state.count;
}
},
methods: {
offerCreated() {
this.offerCount++;
},
offerDestroyed() {
this.offerCount--;
},
addOffer() {
this.offers.push({
name: `Item: ${this.offers.length}`
});
},
removeOffer() {
this.offers.pop();
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">
<div>Offer instances: {{offerCount}}</div>
<div>Offer instances (from store): {{offerCountFromStore}}</div>
<div>
<div v-if="offers.length > 3">
<a href="#">View all offers here</a>
</div>
<div v-else-if="offers.length > 1">
<offer @offer-created="offerCreated" @offer-destroyed="offerDestroyed" v-for="offer in offers" :data="offer"></offer>
</div>
<div v-else-if="offers.length == 1">
<offer @offer-created="offerCreated" @offer-destroyed="offerDestroyed" :data="offers[0]"></offer>
</div>
</div>
<div>
<button @click.prevent="addOffer">Add</button>
<button @click.prevent="removeOffer">Remove</button>
</div>
</div>
尝试使用$children的问题在于它本质上不是反应性的：
当前实例的直接子组件。
$children**，没有订单保证，也不是反应性的**。如果您发现自己试图使用$children进行数据绑定，请考虑使用数组和v-for生成子组件，并使用数组作为事实的来源。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50047639
复制相关文章
相似问题
腾讯云开发者
