Vue基础学习6
组件
组件定义
所谓的组件就是用来封装对应的代码,增加可复用性。
组件的定义可以有三种。
1,2是全局的定义方式。3位局部的组件。组件是相互独立的,数据也是相互独立的。
动态模板:
为了防止template中代码量比较大没我们还可以将其定义在外部:
固定结构的组件:
类似于ul , table这类与子类关联比较强的组件,我们在定义时最好放在一起,不然很容易出现问题,即在他们之内会找不到需要的标签。
组件的嵌套使用
我们模板之下有一块是变化的,这时候,我们就可以使用嵌套模板,通过<slot>标签,可以把要嵌套进来的内容替换该slot。
动态模板
一般实现:
这里,我们通过flag属性和一个v-if可以实现动态的模板展示。
常规实现
我们通过component中的is来进行实现.
特别需要注意的是
我们可以通过<keep-alive>这个标签来设定当前动态加载的组件渲染时数据是否从之前的缓存中取。如果是需要时时更新,则不加。若只显示之前的状态则加上。
组件和他的子组件
在父组件之内定义了一个子组件,这个数据传递过程比较复杂。
父组件传递数据给子组件:
父子间把数据传递给子组件还是比较简单的,在子组件的标签上加入两个属性:message 和message2。子组件为了能拿到那两个数据,需要在自己内部的props字段中加入这两个属性,然后就可以直接获取了。
子组件传递给父组件:
这个过程比较麻烦,子组件需要通过广播的方式发送给父组件。
3为我们通过$emit这个方法,定义了一个名为’e-child’的广播,然后将name和age通过这个广播传递出去。在父标签内,我们定义了接收这个广播的方法getSubData;2为我们去获取这两个属性的方法。
组件之间的数据传递
组件之间的数据传递,是通过$emit广播来进行传递的。而emit广播是Vue对象的方法。所以,组件之间的数据传递是需要依赖Vue的。
这里我们新建一个Vue对象去做数据传递和接收的中间人。而组件的接收是通过$on这个属性来触发的。
这里的componet的引入方式是这样的
VueX
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
它的数据处理流程如下图:
要修改组件中的内容,必须通过图示流程进行。