vue组件及插槽的使用

父子组件

父子组件是组件之间的一种关系，这个关系并不是绝对的，而是相对的。通常，如果在A组件中 使用 了B组件，那么就称A组件为B组件的子组件，相应地，B组件就称为A组件的子组件。

<!-- A组件 -->
<template>
  <div>
    <!-- 3、使用 -->
    <B></B>
  </div>
</template>

<script>
/*
  在工程化项目中，组件想要使用某一组件，有三个步骤：
     1、引入
     2、注册
     3、使用
*/
// 1、引入子组件
import B from './child.vue';
export default {
  data(){
    return {
    
    }
  },
  components:{
   B // 2、组件注册
 }
};
// B组件被引入到组件A中，那么A、B组件之间的关系就叫父子组件，其中A是B的父组件，B是A的子组件
// 这个关系是相对的，不能直接说A是父组件，B是子组件，因为每一个组件都有可能是别的组件的父组件或者子组件。
</script>

插槽

插槽，是vue的一个内置组件，代表的内容就是父组件在使用该组件时，直接写在组件标签中的内容，例如 <mybutton>哈哈</mybutton>

插槽的使用

一般父组件使用某一子组件时，是直接写 <子组件></子组件>，此时页面中显示的就是子组件中固定的内容。如果父组件想要在使用子组件的时候根据需求让子组件显示不同的内容，那就需要用到 插槽

<!-- 父组件 -->
<template>
  <div>
    <B>我是子组件实例1</B>
    <B>我是子组件实例2</B>
  </div>
</template>

<script>
/*
 ！注意：父组件中每使用一次B，就会创建一个vue实例，只是它们用了同一个模板而已，并不代表它们也使用同一套数据
*/
import B from './child.vue';
export default {
  data(){
    return {
    
    }
  },
  components:{
   B 
 }
};
</script>

<!-- 子组件 B  -->
<template>
  <div>
    <h1>
      <!-- 最终这里显示什么内容，是由父组件决定的 -->
      <slot></slot>
    </h1>
  </div>
</template>

<script>
/*
 使用了内置组件 slot，那么渲染的具体内容由其父组件来决定。所以通常 **slot** 是写在那些一开始就被确定是作为子组件使用的组件中
*/
export default {
  data(){
    return {
    
    }
  },
};
</script>

具名插槽

普通插槽能让父组件决定子组件最终渲染什么内容，但是却不能将显示的内容进行精准划分。比如：子组件的结构分为 标题 和 正文，那么父组件怎么把内容传过去让子组件知道哪部分是标题，哪部分是正文呢？这就需要用到 具名插槽 了。
具名插槽：就是给 slot 取一个自定义名字，即在<slot>中添加一个name行内属性。使用的时候，指定内容是哪个name的 slot 即可。

// 子组件-->B
<template>
  <div>
    <h1>
      <!-- 最终这里显示什么内容，是由父组件决定的 -->
      <slot name="title">我是默认值，如果父组件不给我传值，那就显示我</slot>
      <slot name="context">我是默认正文，父组件不传值给我，我就显示</slot>
      <slot>我是无名插槽默认值</slot>
    </h1>
  </div>
</template>

使用

<template>
  <div>
    <B>
     <p slot="title">我是title</p>
     <p slot="context">我是正文</p>
     我的没有指定插槽名的内容，我会取代无名插槽的默认值
    </B>

    <B>
        <!-- 新写法：插槽名只能写在 template 标签上 -->
        <template v-slot:default>取代默认值</template>
        <!-- 没有name的插槽默认其插槽名为 default-->
        <!-- <template v-slot:title>
           <p>我是新写法的插槽内容</p>
        </template> -->

        <!-- 使用简写的方式 -->
        <template #title>
          <p>我是简写</p>
        </template>
        <!-- 
        新写法 v-slot:插槽名 <=> <标签 slot='插槽名'>；
        但是 v-slot:插槽名 不能写在标签或者组件上，只能写在 <template>上；简写是 #插槽名
       -->
    </B>
  </div>
</template>

<script>
/*
 ！注意：父组件中每使用一次B，就会创建一个vue实例，只是它们用了同一个模板而已，并不代表它们也使用同一套数据
*/
import B from './child.vue';
export default {
  data(){
    return {
    
    }
  },
  components:{
   B 
 }
};
</script>