自定义指令的用法和插槽的用法示例

App.vue页面

<template>
  <div class="app-container">
    <h1 v-color>App 根组件</h1>
    <p v-color>测试</p>
    <hr />
    <Article>
      <template #title>
        <h3>我把你画成花</h3>
      </template>
      <template #content="{msg,user}">
        <div>
          <p>未开的一朵花</p>
          <p>再把思念一点一滴</p>
          <p>化成雨落下</p>
          <p>每当你不在</p>
          <p>{{msg}}</p>
          <p>{{user.name}}</p>
        </div>
      </template>

      <template #author>
        <div>
          <div>作者：邓紫棋</div>
        </div>
      </template>
      
    </Article>
    <hr />    
  

    <hr />
    <div class="box" style="display:none">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left>
        <!-- 默认情况下，在使用组件时，提供的内容都会被填充到名字为default的插槽之中 -->
        <!-- 如果要把内容填充到指定名称的插槽中，要使用v-slot这个指令
            后面跟上插槽的名字
          不能直接使用在元素身上，必须使用template标签上
          template是一个虚拟的标签，只起到包裹性质的作用，但是不会被渲染为任何实质性的HTML元素
        v-slot的简写形式为  # -->
        <template v-slot:default>
          <p>在Left组件的内容区，声明的p标签</p>
        </template>
      </Left>
      <hr />
      <hr />
      
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Article from '@/components/Article.vue'

export default {
  data() {
    return {
      // 要展示的组件的名字
      comName:'Left'
    }
  },
    components:{
      Left,
      Article
    },
    directives: {
      // 定义名为color的指令，指向一个配置对象
      color:{
        // 当指令第一次被绑定到元素上的时候，会立即触发bind函数
        // 形参中的el表示当前指令所绑定到的那个DOM对象
        bind(el) {
          console.log('触发了v-color的bind函数');
          el.style.color = "red";
        }
      }
    }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

Article.vue页面

<template></template>
  <div class="article-container">
    <!-- 文章的标题 -->
    <div class="header-box">
        <slot name="title"></slot>
    </div>


    <!-- 文章的内容 -->
    <div class="content-box">
        <!-- 在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫做“作用域插槽" -->
        <slot name="content" msg="hello vue" :user="userinfo"></slot>
    </div>

    <!-- 文章的作者 -->
    <div class="fooer-box">
        <slot name="author"></slot>
    </div>

  </div>
</template>

<script>
export default {
    name:'Article',
    data() {
        return {
            userinfo:{
                // 用户信息你
                name:'yh',
                age:20
            }
           
        }
    },

}
</script>

<!-- scoped防止样式冲突 -->
<style lang="less" scoped>
.article-container {
    >div {
        min-height: 150px;
    }


.header-box {
    background-color: pink;

}
.content-box {
    background-color: lightblue;
}
.fooer-box {
    background-color: orangered;
}
}
</style>

Left.vue页面

<template>
    <div class="left-container">
        <h3>Left 组件----{{count}}</h3>
        <hr />
        <!-- 声明一个插槽区 -->
        <!-- vue官方规定:每一个slot插槽，都要有一个name名称 -->
        <!-- 如果省略了，则有一个默认的名称叫做default -->
        <slot name="default">
          <h6>这是default的默认内容</h6>
        </slot>
        <button @click="count +=1">++</button>
      </div>
</template>

<script>
export default {
  name:'MyLeft',
  data() {
    return {
      count:0
    }
  },
  created() {
    console.log('Left组件被创建了');
  },
  destroyed() {
    console.log('Left被销毁了')
  },
  // 当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期
  // 当组件第一次被激活的时候，只会执行activated生命周期，不会执行created生命周期，因为组件没有被重新创建
  activated() {
    console.log("组件被激活了");
  },
  deactivated() {
    console.log("组件被缓存了");
  },

}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

效果图