阅读 2625

vue slot 插槽里面传递事件 调用外层的函数

由于 有些页面比较类似 都是有相同的东西 我就想着用插槽的方法 去写个模板组件 减少 代码重复量 也可以节省开发时间

image.png 在helloWorld 组件里面定义一个具名插槽 名字为head 这里捆绑了2个属性 data 跟done 其中done 是个方法

image.png 在app.vue 文件使用的时候 就通过 #号简写的方式进行接收 后面用解构的方式 将插槽的属性接受过来 类似于props,官网的案例

image.png 我这边的done 方法是可以直接调用的

image.png

也是类似于调用子组件的方法,当然 有时候 层级多的时候调用子组件的方法 就不太的方便 这时候呢就可以使用这种方式

image.png

image.png 如果 要先处理数据然后调用这个方法呢?我也是想了好久 因为 在标签上只能调用一个方法 不能调用多个方法,不像写js 一样 调用几个就写几个,这个时候呢就可以把方法当作参数传递,然后类似于回调函数一样调用

image.png

image.png 在接受参数的时候也可以给参数重命名 这样子可以让回显的时候直接显示不用再处理数据

image.png

image.png

每天进步一点点

文章分类
前端
文章标签