vue组件的复用、分页案例

一、组件复用(局部组件、全局组件、父类组件传子类组件、子类组件传父类组件)

1,组件

(1)局部组件

写一个子组件

vue组件的复用、分页案例_第1张图片

 写一个父类组件

1.引入局部组件

2.将test作为一个组件存放到当前组件中,把那个导入的组件注册到组件里面

组件名是my-test

vue组件的复用、分页案例_第2张图片

(2)全局组件

全局组件与局部组件的全部是,注册全局组件可以进行使用Main.js

引入组件,将这个组件注册成一个全局组件

vue组件的复用、分页案例_第3张图片

在其他的组件中进行使用

vue组件的复用、分页案例_第4张图片

2、传值(父传子、子传父)

(1)父传子

父组件的data中有一个变量

在父组件中绑定一个属性 partoson 传递给子组件

vue组件的复用、分页案例_第5张图片

子组件接收这个值

使用props 来接收父组件中的值

{{partoson}}使用父组件传递过来的值

vue组件的复用、分页案例_第6张图片

(2)子传父

将子组件中的值传递给父组件,子组件在进行传值的时候一般通过按钮传递

点击按钮时通过事件进行传值

handlechild()
                // $emit 第一个参数代表的是事件的名字
                // 第二个参数代表的是 通过这个事件要传递给父组件的参数是什么

vue组件的复用、分页案例_第7张图片

父组件使用一下子组件中定义的事件接收值

vue组件的复用、分页案例_第8张图片

通过函数 接收值

val是子组件传过来的值

vue组件的复用、分页案例_第9张图片

使用一下值

vue组件的复用、分页案例_第10张图片

二、复用组件分页部门员工表

写一分页子类的组件





 父类(例如部门、员工)直接用子类








你可能感兴趣的:(vue.js,javascript,elementui)