synonym.vue
<template>
<div id="synonym-container">
<div></div>
<div id="synonym-group-list-wrapper">
<ul id="synonym-group-list">
<li v-for="synonymGroup of synonymGroupList" :key="synonymGroup._id">
<carousel :synonyms="synonymGroup.synonyms"></carousel>
</li>
</ul>
</div>
</div>
</template>
<script>
import Carousel from './synonym-carousel.vue'
import $ from 'jquery'
export default {
components: {
'carousel': Carousel,
},
mounted() {
console.log($('.synonym-list'));
},
}
</script>
同义词-carousel.vue
<template>
<div class="synonym-group">
<ul class="synonym-list">
<li></li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
我的目标是我想在synonym.vue文件中获取$('.synonym-list').width()
,这样我就可以为父组件中的所有子组件更改它,但我不知道如何管理它。我检查了文件没有挂钩。如果您有任何想法请告诉我,谢谢!
答案 0 :(得分:4)
使用活动。
<carousel @update="onCarouselUpdate" :synonyms="synonymGroup.synonyms"></carousel>
...
export default {
components: { ... },
mounted () { ... },
methods: {
onCarouselUpdate () {
console.log('Carousel Updated!')
}
}
}
同义词传送带:
export default {
updated () {
this.$emit('update')
}
}
docs:https://vuejs.org/v2/guide/components.html#Custom-Events
答案 1 :(得分:0)
synonym.js
int newPosition = 0;// outside of loop
x = numArray[position];
if(x!=val)
{
newArray[newPosition] = numArray[position];
newPosition++;
}
同义词传送带:
<li v-for="(synonymGroup, i) of synonymGroupList" :key="synonymGroup._id">
<carousel @update="onCarouselUpdate" :synonyms="synonymGroup.synonyms" :isLast="i === (synonymGroupList.length - 1)? true: false"></carousel>
</li>
export default {
components: { ... },
mounted () { ... },
methods: {
onCarouselUpdate () {
console.log('Carousel Updated!')
}
}
}
基于@CodinCat答案,这是我的最终解决方案。它的优点是它不会触发每个列表项的更新(因为使用了v-for),但仅限于最后一个,所以当“一切准备就绪”时。