外观
插槽Slots
插槽是一个可以向组件中添加HTML标签的语法,具体看下面的例子。
在子组件中,添加一个没有任何文本的空slot标签,在父组件引用子组件时,使用闭合标签,里面添加的HTML标签,会替换子组件的slot标签。
<!--MyComponent1-->
<template>
<MyComponent2>
<h3>在MyComponent1中添加的h3</h3>
</MyComponent2>
</template>
<script>
import MyComponent2 from '@/components/MyComponent2.vue'
export default {
components: {
MyComponent2
}
}
</script><!--MyComponent2-->
<template>
<h3>MyComponent2</h3>
<slot></slot>
</template>
<script>
export default {
}
</script>