vue前端开发自学,插槽练习第二次,name属性的使用

vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性，来自定义一个名字，这样，就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候，很简答，只需要在slot标签里面加上name=“mz”；

下面看代码。

<template>
  <h3>App</h3>
  <!-- <SlotBase>

    <div>
      <h3>标题</h3>
      <p>内容</p>
    </div>
  </SlotBase> -->
  <SlotTwo>
    <template v-slot:header>
      <h3>我是动态数据,{{message}}</h3>
    </template>
    <template v-slot:main>
      <h4>我是静态内容来自插槽002</h4>
    </template>
  </SlotTwo>

</template>
<script>
import SlotBase from './components/SlotBase.vue'
import SlotTwo from "./components/SlotTwo.vue"
export default{
  data(){
    return {
      message:"插槽内容002"
    }
  },
  components:{
    SlotBase,
    SlotTwo
  }
}
</script>

这个内容是app.vue入口文件的内容源码。下面看看，SlotTwo.vue里面的代码情况。

<template>
    <h3>插槽内容练习2</h3>
    <slot name="header">插槽默认值1</slot>
    <hr>
    <slot name="main">插槽默认值2</slot>
</template>

如图所示，里面定义了2个插槽，而且都分别对应各自的name。这个name就是你在父组件里面定义那个属性值：

如图所示，这个v-slot就是用来自定义插槽的名字的。很简单。