关于插槽的话个人理解就是在父组件中引用子组件的同时,可以对子组件的一些内容进行修改或者补充,光这么说可能不大明白,下面就来演示一下插槽的用法。
1.默认插槽
- slot就是在子组件中挖个坑,坑里面放什么东西由父组件决定。
一般情况下如果子组件内只需要插入或修改一条内容的话,只要在其内部写入一个slot元素就可以了,不需要为其命名,这就是默认的插槽,在父组件中编写的内容都会在这个插槽中出现,如果slot元素中有默认内容会被父组件中传来的内容覆盖,示例如下:
父组件:
<template>
<div>
<div>{
{msg}}</div>
<child>这是往子组件内插入的内容</child>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
},
data () {
return {
msg: '这是父组件'
}
}
}
</script>
子组件:
<template>
<div>
<div>这是子组件</div>
<slot></slot>