如果有两个组件他们有百分之八十的内容是一样的,但是有百分之二十的内容是不一样的,我们首先当然可以将他们各自声明为一个组件,分别引用。
但是为了防止写重复的内容,我们可以声明一个组件,然后再这个组件中声明一个插槽,这个插槽中的内容由父组件进行填充。这样只需要声明一个子组件包括那百分之八十的内容,然后留下一个插槽,然后父组件在使用这个子组件的时候自己将不同的那百分之二十填充到插槽中即可。
子组件:
<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> 效果:
<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> 效果:
<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>