vue插槽的使用
在我们开发项目的时候,我们往往会封装一些公用的组件,但是组件在应用的过程中,往往不能满足我们的需求,这个时候,我们就需要用到插槽
vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢? 我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。 注意:以下的所有内容是基于vue版本 2.6.0 起
首先写一个父组件
然后是子组件
在这里关键点是父组件里面调用子组件,然后看看是否显示 测试内容显示
执行结果
3.1默认插槽
在我们引入一个button的时候,你希望btn里面的值,可以修改,可以控制,这个时候
button 组件 需要有<slot>标签,里面默认的文字就是button的内容
当你想要调用这个组件修改里面的值的时候,你只要传对应的值就即可
3.2具名插槽
如果我们在子组件特定的位置显示一些不一样的内容,这个时候,就用到了具名插槽,我们可以给插槽绑定name的值
当然也可以简写 v-slot用#代替
3.3作用域插槽
在我们父组件需要调用子组件的时候,然后呢,子组件的值需要替换,就需要用到作用域插槽