首页 > 毕业论文 > vue组件化开发毕业论文

vue组件化开发毕业论文

发布时间:

vue组件化开发毕业论文

1.全局组件:组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 没有单文件组件时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个) 注册的组件不要跟系统标签同名2.局部组件:一个vm实例可以有多个局部组件,但是只能供当前vm实例使用 全局和局部组件举例(filter举例,不只filter只要是Vue里面的方法都是可以用的)

相信有过项目开发经验的小伙伴一定知道,在项目中往往会有多个地方需要用到样式相似,细节略有差异的组件,比如说导航栏和搜索栏,这些组件出现频率比较高,但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦,而且复用性也很低。 可能有些读者会觉得,这不难解决,对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决,比如导航栏中的标题,我们可以都交由父组件传值来实现。(比如下面的导航栏1和导航栏2) 不错,当组件的变化程度不大时,这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景,导航栏中部的位置可能是标题,也有可能是下拉框,是搜索框或者是其他自定义的组件呢?此时我们就很难单纯通过 props 来拓展我们的组件灵活性了。(比如下面的导航栏1和导航栏3)

在子组件中,使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例: 我们一共在Vue实例中使用了2次子组件,第一次父组件没有往子组件中传递元素,第二次父组件有往子组件传递元素。

从结果上看,当父组件没有往子组件插槽中添加元素时,则会展示插槽中默认的内容,而如果父组件有传递插槽内容,则会覆盖插槽的默认内容,而后进行显示。

在第二小节中,我们已经知道了插槽的基本使用,但是当子组件的功能比较复杂时,我们可能就要在组件中定义多个插槽,来满足更加灵活的业务需要。比如上面举例的京东导航栏,这个组件内部可以拆分为三个插槽,分别对应 左 、 右 、 中 三个位置的内容。 但想要在组件内预留多个插槽有个前提条件,就是我们必须要让每个插槽都有其对应的唯一标识,这样父组件传递内容的时候,才能识别出来哪些内容对应哪个插槽。

我们可以看一下下面这个案例: 子组件内定义了三个具名插槽,我们在父组件中进行子组件的调用,需要注意的是我们并没有完全按照顺序去传递对应插槽的内容。但实际上从演示结果中我们可以发现, 无论父组件传递的插槽内容顺序如何,最终解析的时候都会将传入的插槽内容根据 slot name 进行正确的渲染的 。

在讲解作用域插槽之前,我们需要先对 编译作用域 进行理解。具体表现在 父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。 我们可以通过下面这个案例来理解这个规则: 父组件和子组件都使用了 isShow 来控制组件的显示,同时在父子组件的data中,又都有同名的变量 isShow 。我们从结果中可以看到,定义在在父组件中子组件,其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的 isShow 标识,则受子组件自身data变量的约束,也就是说此处子组件模板的变量取的是子级作用域中的变量值。

在上一小节的演示中,我们已经可以了解到编译作用域的概念,也知道了父组件无法直接使用子组件内部的数据(因为子组件模板内部的数据是在子组件的作用域中的)。但 有些场景下,我们又会需要父组件可以替换插槽的标签,但是内容由子组件来提供。 那么,此时我们就可以使用作用域插槽来解决这个问题。

我们可以来看一下下面这个案例:子组件中存在一个数组,现在我们想要通过插槽的方式,来根据不同的需要实现数组的展示方式: 在父组件中,我们定义了2种展示数据的方式,一种为展示为列表形式,还有一种是每种语言以 -- 进行分割。在使用上,子组件需要在插槽处通过 :data 的方式提供对外暴露的数据,父组件在使用的时候,则是先在子组件内部定义