Vue动态组件: 插槽+自定义指令+tabbar案例

莫凡是莫烦
880 阅读7分钟

1. 组件进阶

1.0 组件进阶 - 动态组件

目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件

需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息

效果如下:

动态组件.gif

  1. 准备被切换的 - UserName.vue / UserInfo.vue 2个组件
  2. 引入到UseDynamic.vue注册
  3. 准备变量来承载要显示的"组件名"
  4. 设置挂载点<component>, 使用is属性来设置要显示哪个组件
  5. 点击按钮 – 修改comName变量里的"组件名"
<template>
  <div>
      <button @click="comName = 'UserName'">账号密码填写</button>
      <button @click="comName = 'UserInfo'">个人信息填写</button>
​
      <p>下面显示注册组件-动态切换:</p>
      <div style="border: 1px solid red;">
          <component :is="comName"></component>
          
      </div>
  </div>
</template>
​
<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 创建要被切换的组件 - 标签+样式
// 2. 引入到要展示的vue文件内, 注册
// 3. 变量-承载要显示的组件名
// 4. 设置挂载点<component :is="变量"></component>
// 5. 点击按钮-切换comName的值为要显示的组件名
​
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
    data(){
        return {
            comName: "UserName"
        }
    },
    components: {
        UserName,
        UserInfo
    }
}
</script>

在App.vue - 引入01_UseDynamic.vue并使用显示

总结: vue内置component组件, 配合is属性, 设置要显示的组件名字

1.1 组件进阶 - 组件缓存

组件切换会导致组件被频繁销毁和重新创建, 性能不高

image.png 使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

  • 语法:

Vue内置的keep-alive组件 包起来要频繁切换的组件

02_UseDynamic.vue

<div style="border: 1px solid red;">
    <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
</div>

image.png 这里实际创建只有一次（第一次的创建是默认的显示）

补充生命周期:

  • activated - 激活
  • deactivated - 失去激活状态

总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法

1.2 组件进阶 - 激活和非激活

目标: 被缓存的组件不再创建和销毁, 而是激活和非激活

补充2个钩子方法名:

activated – 激活时触发

deactivated – 失去激活状态触发（切换会触发）

image.png

1.3 组件进阶 - 组件插槽

目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

需求: 以前折叠面板案例, 想要实现不同内容显示, 我们把折叠面板里的Pannel组件, 添加组件插槽方式

image.png

语法口诀:

  1. 组件内用占位

image.png 0. 使用组件时夹着的地方, 传入标签替换slot

image.png

总结: 组件内容分发技术, slot占位, 使用组件时传入替换slot位置的标签

1.4 组件进阶 - 插槽默认内容

目标: 如果外面不给传, 想给个默认显示内容

口诀: 夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示

image.png

<slot>还没有建设</slot>

1.5 组件进阶 - 具名插槽

目标: 当一个组件内有2处以上需要外部传入标签的地方

传入的标签可以分别派发给不同的slot位置

要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

image.png

image.png

==v-slot可以简化成#使用==

v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

1.6 组件进阶 - 作用域插槽

目标: 子组件里值, 在给插槽赋值时在父组件环境下使用

复习: 插槽内slot中显示默认内容

例子: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

口诀:

  1. 子组件, 在slot上绑定属性和子组件内的值
  2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
  3. scope变量名自动绑定slot上所有属性和值

子组件

image.png

！这里一定要用row传值

// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象
export default {
  data() {
    return {
      isShow: false,
      defaultObj: {
        defaultOne: "无名氏",
        defaultTwo: "小传同学"
      }
    };
  },
};
</script>

父组件

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <!-- 需求: 插槽时, 使用组件内变量 -->
        <!-- scope变量: {row: defaultObj} -->
        <template v-slot="scope">
          <p>{{ scope.row.defaultTwo }}</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>
​
<script>
import Pannel from "../components/05/Pannel";
export default {
  components: {
    Pannel,
  },
};
</script>

总结: 组件内变量绑定在slot上, 然后使用组件v-slot="变量" 变量上就会绑定slot身上属性和值（这里接收的是对象）

1.7 组件进阶 - 作用域插槽使用场景

目标: 了解作用域插槽使用场景, 自定义组件内标签+内容

案例: 封装一个表格组件, 在表格组件内循环产生单元格

image.png

准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里

1.子组件：

image.png

使用slot动态绑定（这样随意更改传过来的DOM格式）

！这里row里面传递的是对象

2.父组件

通过template和v-slot接收row传过来的数据，并将内容插入到标签内

image.png

总结: 插槽可以自定义标签, 作用域插槽可以把组件内的值取出来自定义内容

2. 自定义指令

自定义指令文档

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

html+css的复用的主要形式是组件

你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

2.0 自定义指令-注册

目标: 获取标签, 扩展额外的功能

局部注册和使用

07_UseDirective.vue - 只能在当前组件.vue文件中使用

<template>
  <div>
      <!-- <input type="text" v-gfocus> -->
      <input type="text" v-focus>
      
  </div>
</template>
​
<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
    data(){
        return {
            colorStr: 'red'
        }
    },
    directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }
}
</script>
​
<style>
​
</style>

全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

总结: 全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用

2.1 自定义指令-传值

目标: 使用自定义指令, 传入一个值

需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

main.js定义处修改一下

// 目标: 自定义指令传值
Vue.directive('cColor', {
    inserted(el, binding) {
        console.log(el); //p标签
        console.log(binding); //自定义指令的属性
        el.style.color = binding.value
            //全局使用的，聚焦功能
    },
    update(el, binding) {
    //更新后的值接收到vm层
        el.style.color = binding.value

    }
})

Direct.vue处更改一下

<template>
  <div>
      <input type="text" name="" id="" v-gFocus>
      <!-- 全局 -->
      <p v-Lcolor>这是局部的自定义颜色</p>
      <p v-cColor='colorType'>通过传值改变颜色</p>
      <button @click="changeColor">点击更改文字颜色</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            colorType : 'yellow'
        }
    },
    directives:{
        Lcolor:{
            inserted(el){
                el.style.color = 'red'
            }
        }
    },methods:{
        changeColor(){
            this.colorType = 'blue'
        }
    }

}
</script>

<style>

</style>

总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作

项目中遇到的问题

  1. 创建项目名发现首字母大写创建失败，但是小写就成功了

image.png

  1. 由于组件名和标签冲突报错（header）

image.png

(改下名即可) image.png

  1.    // 自定义校验规则

arr: {
      type: Array,
      required: true,
      
      
      
      // 自定义校验规则
      validator(value) {
        // value就是接到数组
        if (value.length >= 2 && value.length <= 5) {
          return true; // 符合条件就return true
        } else {
          console.error("数据源必须在2-5项");
          return false;
        }
      },
    },
  }
    • 需求: 点击底部实现高亮效果

分析：

①: 绑定点击事件, 获取点击的索引

②: 循环的标签设置动态class, 遍历的索引, 和点击保存的索引比较, 相同则高亮

效果演示:

image.png

第一种写法：（使用函数）

<template>
  <div class="my-tab-bar">
  	<div class="tab-item" v-for="(obj,index) in arr" :key="index"
      @click="isLight(index)"
    :class="{current: index === setIndex}">
      <!-- 图标 -->
      <span class="iconfont" :class="obj.iconText"></span>
      <!-- 文字 -->
      <span>{{obj.text}}</span>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            setIndex : 0
        }
    }, methods: {
        isLight(value){
            this.setIndex = value
        }
    },
}
</script>
<style lang="less" scoped>
.current {
  color: #1d7bff;
}
</style>

第二种写法（直接判断）

<template>
  <div class="my-tab-bar">
    <div class="tab-item" 
    v-for="(obj, index) in arr" 
    :key="index"
    :class="{current: activeIndex === index}"
    @click="activeIndex = index">
      <!-- 图标 -->
      <span class="iconfont" :class="obj.iconText"></span>
      <!-- 文字 -->
      <span>{{ obj.text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      activeIndex: 0 // 高亮元素下标
    }
  },
  // ....其他代码
};
</script>
  1. 动态切换

需求: 点击底部切换组件

分析：

①: 底部导航传出动态组件名字符串到App.vue

②: 切换动态组件is属性的值为要显示的组件名

效果演示:

tabbar_切换组件.gif

步骤:

父组件

1.首先将要展示的组件部分引入

import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue'
import MyUserInfo from './views/UserInfo.vue'

2.使用component 标签的is绑定不同的在组件名

<component :is="componentId"></component>

3.接收子组件的组件名

   <my-tab-bar :arr='tabList'
         @changeCom="changeComFn"
></my-tab-bar>


export default {
 data() {
    return {
      componentId:'MyGoodsList',
    }
,methods:{
    changeComFn(cName){
      this.componentId = cName
      //将子组件传过的组件名传给is对应的值
    }
  }
  }
子组件
  1. 接收父组件传过来的对象

image.png

  1. 点击对应的按钮，则使用函数通过对象传递组件名发送给父组件

image.png

  1. 删除错删下一个

image.png

原因：数组下标是从0开始，而这个对象的id是从1开始

因此，findIndex的判断可以解决这个问题

methods:{
    removeBtn(id){
        let index = this.list.findIndex(obj => obj.id === id)
                // console.log(index);
        console.log(this.list.splice(index,1))
    }
avatar
文章
阅读
粉丝