vue组件模块化开发

1组件的使用

步骤:

①引用组件

②定义组件

③使用组件

①局部组件

在一个组件里面使用另一个组件,组件的作用仅在当前宿主组件中生效

vue组件模块化开发_第1张图片

② 全局组件

全局组件在main.js,引用,定义,可以在任何组件中使用是全局的

vue组件模块化开发_第2张图片

2传值

①父传子

父组件

vue组件模块化开发_第3张图片

子组件

vue组件模块化开发_第4张图片

总结父传子:

在父组件中,引入,定义,使用子组件

父组件代码:

vue组件模块化开发_第5张图片

子组件代码:

vue组件模块化开发_第6张图片

②子传父

父组件

vue组件模块化开发_第7张图片

子组件

vue组件模块化开发_第8张图片

未完待续

3传值案例

分页插件

(mybatis-plus自带的分页插件+vue+element-ui)

前提是:已经有一个分页的功能的页面了,

vue组件模块化开发_第9张图片

①新建一个组件

fenye.vue

把关于dept.vue组件的分页的内容拿出来

vue组件模块化开发_第10张图片

②设置分页组件

在main.js里引入分页组件

引入fenye.vue,设置全局属性,在dept.vue中使用,

vue组件模块化开发_第11张图片

vue组件模块化开发_第12张图片

③父组件

vue组件模块化开发_第13张图片

④子组件

分页插件

vue组件模块化开发_第14张图片

你可能感兴趣的:(vue.js,前端,javascript,spring,boot,java)