动态组件_插槽_自定义指令

式微式微胡不归

已于 2022-09-24 17:09:41 修改

阅读量1.5k

点赞数 4

分类专栏： Vue基础文章标签： vue.js 前端 javascript

于 2022-09-24 17:05:47 首次发布

本文链接：https://blog.csdn.net/zhangli33/article/details/127021472

版权

Vue基础专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、动态组件

目标：动态组件 - 切换组件显示

场景：同一个挂载点要切换不同组件显示

1.创建要被切换的组件 --- 标签+样式

2.引入到要展示的vue文件内，注册

3.变量 - 承载要显示的组件名

4.设置挂载点<components :is="变量"></components>

5.点击按钮-切换变量的值为要显示的组件名

二、组件缓存

用keep-alive包裹要频繁切换的组件，可以不销毁组件

钩子函数---组件缓存

三、插槽

1.基本使用

目标：组件插槽使用-为了让封装的组件显示不同的标签结构

场景:组件切换，但切换的组件显示不同的内容，也就是切换的组件内标签不同

1.组件内<slot></slot>站位

2.使用组件，传入具体的标签替换，到slot位置上

3.①如果使用组件时，没有传入具体的标签，就显示slot标签内写入的内容

②如果给组件传入具体的标签，则slot会被替换

Pannel.vue

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <slot>显示默认内容</slot>
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

App.vue

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <pannel>
        <img src="./assets/mm.gif" alt="" />
        <span>我是内容</span>
      </pannel>
      <pannel>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </pannel>
      <!-- 显示slot内默认的内容 -->
      <pannel></pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "./components/Pannel.vue";

export default {
  components: { Pannel },
  Pannel,
};
</script>

运行结果

2.具名插槽

目标：具名插槽

场景:组件内有多处不确定的html内容

1.slot占位 - name属性起名字

2.使用组件,template配合v-slot:插槽名，夹着具体的标签

3. v-slot:插槽名可以简写 #插槽名

Pannel.vue

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <slot name="content"></slot>
    </div>
  </div>
</template>

App.vue

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>

      <pannel>
        <template v-slot:title>
          <h2>宠物之家</h2>
        </template>
        <template v-slot:content>
          <img src="./assets/mm.gif" alt="" />
          <span>我是内容</span>
        </template>
      </pannel>

      <pannel>
        <template #title>
          <h4>芙蓉楼送辛渐</h4>
        </template>
        <template #content>
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问。</p>
          <p>一片冰心在玉壶。</p>
        </template>
      </pannel>
    </div>
  </div>
</template>

运行结果

3.作用域插槽

目标：作用域插槽

场景：使用插槽，使用组件内的变量

1.slot标签，自定义属性和组件内的标签关联

2.使用组件，template配合v-slot="变量名"

3.变量名会收集slot身上的属性和值形成对象

①无名插槽作用域

Pannel.vue

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <slot :row="obj" :col="num">{{obj.name}}</slot>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isShow: false,
      obj:{
        name:'zs',
        age:18
      },
      num:1
    };
  },
};
</script>

App.vue

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <pannel>
        <template v-slot="scope">
          {{scope}}
          <!-- 复杂类型 -->
          {{scope.row.age}}
          <!-- 简单类型 -->
          {{scope.col}}
        </template>
      </pannel>
    </div>
  </div>
</template>

②具名插槽作用域

写法一：v-slot:插槽名="scope"

写法二：#插槽名="scope"

Pannel.vue

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>
         <slot :row="user" :col="age" name="title"></slot>
      </h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
         <slot :row="user" :col="age" name="content"></slot>
    </div>
  </div>
</template>

App.vue

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
       <template #content="scope">
       {{scope}}
       </template>
       <template v-slot:title="scope">
       {{scope}}
       </template>
      </Pannel>
      <Pannel>
        
       
      </Pannel>
    </div>
  </div>
</template>

四、自定义指令

目标：创建"自定义指令"，让输入框自动聚焦

场景：当Vue内置指令满足不了需求时，可以自己定义使用

1.创建自定义指令全局/局部

2.在标签上使用自定义指令 v-指令名

1.局部

<template>
  <div>
    <!-- <input type="text" v-gfocus /> -->
    <input type="text" v-focus />
    <p v-color="colorStr">文字颜色</p>
  </div>
</template>

<script>
export default {
  
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },

  data() {
    return {
      colorStr: "red",
    };
  },
};
</script>

2.全局

<template>
  <div>
    <input type="text" v-focus>
    <input type="text" v-gfocus>
  </div>
</template>

<script>
export default {
  directives: {
    focus:{
      inserted(el){
        console.log(el);
        el.focus()
      }
    }
  },

 
};
</script>

3.自定义指令传值

注意：

inserted方法 - 指令所在标签，被插入到网页上触发(一次)

update方法 - 指令对应数据/标签更新时，此方法执行

<template>
  <div>
    <p v-color="colorStr">通过自定义指令修改文案颜色</p>
  </div>
</template>

<script>
export default {
  directives: {
    color:{
      inserted(el,binding){
        el.style.color = binding.value
      },
      update (el,binding) {
         el.style.color = binding.value
      }
    }
  },

  data() {
    return {
      colorStr:'blue'
    };
  },
};
</script>