Vue组件综合实践 - 多个轮播图衔接及切换

912 阅读1分钟

  如Vue的文档所说,一个项目就相当于一棵嵌套的组件树。

  引用的自定义组件之间不是相互影响相互控制的关系,单个自定义组件操作的是全局的数据,是全局数据的变化影响了各个组件的视图的变化。

  比如上面Carousel是一个项目的某个部分,相对于Carousel,CarouselChooseBtn、CarouselMainPics、CarouselThumbnails是子组件,在Carousel的data中存入的info是相对于这个部分的全局数据,这个数据以引用类型的形式存入使得Carousel的子组件都得以操作这个数据,Carousel的三个子组件CarouselChooseBtn、CarouselMainPics、CarouselThumbnails都是通过改变info这个全局数据来实现整个部件的视图更新的,然而三个字组间并没有互相操纵,它们之所以能在视图上呈现相互影响的效果是因为他们都使用了同一个全局数据info,是info的改变使使用到它的子组件的视图都发生了改变从而呈现出一个整体的视图变化的效果。