vue slot 插槽里面传递事件 调用外层的函数__Vue.js
发布于 13 天前 作者 banyungong 115 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

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

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

每天进步一点点

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Try to do 原文链接:https://juejin.im/post/6945796799860834340

回到顶部