基础入门：vue.js 插槽的基本使用
1、插槽的基本使用
- 在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。
- 这里有一个
<FancyButton>组件，可以像这样使用：<FancyButton> Click me! <!-- 插槽内容 --> </FancyButton>
- 而
<FancyButton>的模板是这样的：<button class="fancy-btn"> <slot></slot> <!-- 插槽出口 --> </button>
<slot>元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
2、渲染作用域
- 父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。
3、具名插槽
- 带
name的插槽被称为具名插槽 (named slots)。<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>- 要为具名插槽传入内容，我们需要使用一个含
v-slot指令的<template>元素，并将目标插槽的名字传给该指令。
4、具名作用域插槽
- 具名作用域插槽的工作方式也是类似的，插槽 props 可以作为
v-slot指令的值被访问到。 - 注意插槽上的
name是一个 Vue 特别保留的 attribute，不会作为 props 传递给插槽。
部分内容转载自：插槽 Slots | Vue.js
源代码：
App.vue:
<script>
import Content from './components/Content.vue'
export default{
data(){
return{
message:'这里是中国，'
}
},
methods:{
changeMag:function(){
this.message='我所站立的地方！'
}
},
components:{
Content,
}
}
</script>
<template>
<div>
<Content><button>按钮</button></Content>
<Content><input type="text"></Content>
<Content><button @click="changeMag">按钮</button><input type="text"><p>{{message}}</p></Content>
<Content>
<!-- v-slot 只能添加在<template> -->
<!-- 父级模板的所有内容都是在父级作用域中编译，子级模板的所有内容都是在子级作用域中编译 -->
<template v-slot:button><button>按钮</button></template>
<template v-slot:input><input type="text"></template>
<template v-slot:h2><h2>你好，世界！{{message}}</h2></template>
</Content>
<!-- 无序列表 -->
<Content>
<template v-slot:default="slotProps">
<ul>
<li v-for="item in slotProps.list" :key="item">{{item}}</li>
</ul>
</template>
</Content>
<!-- 有序列表 -->
<Content>
<template v-slot:default="slotProps">
<ol>
<li v-for="item in slotProps.list" :key="item">{{item}}</li>
</ol>
</template>
</Content>
</div>
</template>
<style>
</style>
Content.vue:
<script>
export default{
data(){
return{
message:'word',
list:[1,2,3,4,5]
}
},
}
</script>
<template>
<p>我是content组件内容</p>
<slot></slot>
<slot name="button"></slot>
<slot name="input"></slot>
<slot name="h2"></slot> -->
<slot :list="list"></slot>
</template>
<style>
</style>源代码运行情况：
