vue.js基础学习（插槽的基本使用）

基础入门：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>

源代码运行情况：