vue(17)组件插槽slot的使用
如果有两个组件他们有百分之八十的内容是一样的，但是有百分之二十的内容是不一样的，我们首先当然可以将他们各自声明为一个组件，分别引用。
但是为了防止写重复的内容，我们可以声明一个组件，然后再这个组件中声明一个插槽，这个插槽中的内容由父组件进行填充。这样只需要声明一个子组件包括那百分之八十的内容，然后留下一个插槽，然后父组件在使用这个子组件的时候自己将不同的那百分之二十填充到插槽中即可。
子组件：
<template>
<div>
这是子组件
<slot></slot>
</div>
</template>
<script>
export default ({
data:function(){
return{
}
},
methods:{
}
})
</script>
<style scoped>
</style>
父组件：
<template>
<div>
<HelloWorld >
<button>子组件1</button>
</HelloWorld>
<HelloWorld >
<a href="">子组件2</a>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from './component/HelloWorld'
export default {
name:"App",
data:function(){
return {
};
},
components:{
HelloWorld
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
效果：
在子组件的slot标签中我们也可以加入内容，这些内容作为插槽的默认显示内容，在父组件使用子组件的时候没有为子组件的插槽加上内容时，就会显示这些默认的显示内容。
子组件中可以添加多个插槽，然后给每个插槽name属性附上不同的值，父组件可以通过这个name来给不同的插槽添加不同的内容如下：
子组件：
<template>
<div>
这是子组件
<br>
<slot name="oneSlot"></slot>//第一个插槽
<br>
<slot name="twoSlot"></slot>//第二个插槽
</div>
</template>
<script>
export default ({
data:function(){
return{
}
},
methods:{
}
})
</script>
<style scoped>
</style>
父组件：
<template>
<div>
<HelloWorld >
<template v-slot:oneSlot>//为第一个插槽附上内容
<button>第一个插槽</button>
</template>
<template v-slot:twoSlot>//为第二个插槽附上内容
<a href="">第二个插槽</a>
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from './component/HelloWorld'
export default {
name:"App",
data:function(){
return {
};
},
components:{
HelloWorld
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
效果：
父组件中填入子组件插槽内容的时候如果用{{msg}}这个msg变量是用的父组件中定义的msg变量，如果希望使用子组件本身的变量来填充内容，需要子组件在定义插槽的时候通过属性的方式将它的变量传递给父组件，写法如下：
子组件：
<template>
<div>
这是子组件
<br>
<slot name="oneSlot" childName="childName"></slot>//定义childName属性，它的值是childName变量的值
</div>
</template>
<script>
export default ({
data:function(){
return{
childName:"child"
}
},
methods:{
}
})
</script>
<style scoped>
</style>
父组件：
<template>
<div>
<HelloWorld >
<template v-slot:oneSlot="childPro">//这个childPro包括子组件中所有定义的属性
{{parentName}}//这个parentName是父组件中的变量
<br>
{{childPro.childName}}//获取子组件中属性childName的值
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from './component/HelloWorld'
export default {
name:"App",
data:function(){
return {
parentName:'parent'
};
},
components:{
HelloWorld
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
