TOC
假设你拥有父组件A,子轮播图组件B，你想在用A中使用B， 假设你使用slot对其进行模板的传递
<div class="slider-wrapper">
<slider>
<div v-for="item of slider">
<a href=""><img :src="item.pic" alt=""></a>
</div> // slot
</slider>
</div>
//
但是轮播必然牵扯到样式的切换和初始化，这就意味着必须进行一个样式的初始化，而你又不想写在父组件的模板之中，因为那样会偏离关注点原则，让父组件调用的时候关心一些无关的东西。
所以我们需要在子组件中去做这些事情，所以我们在子组件的Mounted生命周期中去做些底层的便利操作
mounted() {
setTimeout(() => {
this._setSliderWidth()
this._initSlider()
}, 20)
},
methods: {
_setSliderWidth() {
this.children = this.$refs.sliderGroup.children
let width = 0
let sliderWidth = this.$refs.slider.clientWidth
for (let i = 0; i < this.children.length; i++) {
let child = this.children[i]
}
},
_initSlider() {
}
}
这些我们就保证了好莱坞原则，让父组件调用的时候只传递必须的数据
这里请注意一个组件的生命周期问题，就是当子组件mounted触发的时候请确保你所有的数据都已经到位，如果是一个AJAX请求，那么很有可能你会没来得及获取数据，就触发mounted,那么自然就无法正常的渲染数据了