• Vue 插槽(slot)使用

    Slot 通俗理解就是‘占坑’，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑(替换组件模板中slot位置)

    并且可以作为承载分发内容的出口

    内容插槽

    定义两个组件 home.vue、test.vue

    然后在home.vue组件中引用test.vue组件

    插槽内可以包含普通文本

    1. //home.vue
    2. <test>
    3.      Hello Word
    4. test>
    5.  
    6.  
    7. //test.vue
    8. <a href="#">
    9. 	 <slot>slot>
    10. a>

    当组件渲染的时候，会被替换为Hello Word

    插槽内可以包含任何模板代码，包括HTML

    在你的 index.html 引用 Font Awesome 图标的样式就直接可以用那里面的图标了

    1. //home.vue
    2. <test>
    3.     
    4.     <span class="fa fa-user">span>
    5.     Hello Word
    6. test>

    插槽内添加其他组件

    1. //home.vue
    2. <test>
    3.     
    4.     <font-awesome-icon>font-awesome-icon>
    5.     Hello Word
    6. test>

    如果中没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

    在插槽中使用数据

    插槽跟模板其他地方一样都可以访问相同的实例属性(也就是相同的"作用域")，而不能访问的作用域

    1. //home.vue
    2. //这里是获取不到name的，因为这个值是传给<test>的
    3. <test name='you'>
    4.     Hello {{name}}
    5. test>
    6.  
    7. <script>
    9. 	//插槽可以获取到home组件里的内容
    10. 	Hello {{enhavo}}
    12.  
    13. data(){
    14. 	return{
    15. 		enhavo:'word'
    16. 	}
    17. }
    18. script>

    规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

    后备内容(默认内容)插槽

    有时候我们需要给插槽设置一个具体的默认内容，当别的组件没有给你内容的时候，那么默认的内容就会被渲染

    1. //test.vue
    2. //在slot插槽里设置默认内容 Submit
    3. <button>
    4.   <slot>Submitslot>
    5. button>

    在home.vue里直接使用test.vue如下：

    1. //home.vue
    2. <test>test>

    那么最后设置的默认内容 Submit 将会被渲染

    1. <button>
    2.    Submit
    3. button>

    假如我们提供内容呢？

    1. //home.vue
    2. <test>按钮test>

    那么这个提供的内容将会替代默认的内容被渲染出来

    1. <button>
    2.    按钮
    3. button>

    具名插槽

    有时候我们一个组件里需要多个插槽对于这样的情况，元素有一个特殊的特性：name ，这个特性可以用来定义额外的插槽

    1. <div>
    2.   <header>
    3.     
    4.   header>
    5.   
    6.   <main>
    7.     
    8.   main>
    9.   
    10.   <footer>
    11.     
    12.   footer>
    13. div>

    这时候，我们就可以使用name属性

    1. <div>
    2.   <header>
    3.     <slot name="header">slot>
    4.   header>
    5.   
    6.   <main>
    7.     <slot>slot>
    8.   main>
    9.   
    10.   <footer>
    11.     <slot name="footer">slot>
    12.   footer>
    13. div>

    如果一个不带name属性的话，那么它的name默认为default
    在向具名插槽提供内容的时候，我们可以在