vue.js动态组件和插槽的使用汇总

目录
  • 组件进阶-props校验
    • props校验
  • 组件进阶 - 动态组件
  • 组件进阶-keep-alive组件
    • keep-alive
  • 组件进阶-keep-alive组件-指定缓存
  • 组件进阶 - 默认插槽
    • 格式
  • 组件进阶-具名插槽
  • 组件进阶-作用域插槽(难点)
  • 自定义指令-基本使用
    • 自定义指令-定义方式
    • 示例 自动获取焦点
  • 自定义指令-传值和更新

组件进阶-props校验

props校验

普通格式: props: ["propA", "propB"]。没有类型检查

高阶格式:

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

组件进阶 - 动态组件

目标效果:

需求: 完成一个注册功能页面, 2个按钮切换, 额外封装两个组件:一个填写注册信息, 一个填写用户简介信息

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

目录结构:

根组件
├── App.vue
└── components
    ├── UserName.vue # 用户名和密码输入框
    └── UserInfo.vue # 人生格言和自我介绍框

格式:

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

操作:

UserName.vue

<template>
  <div>
    <h2>UserName</h2>
    <p>用户名:<input /> </p>
    <p>密码:<textarea /> </p>
  </div>
</template>
<script>
export default {
}
</script>

在父组件App.vue中使用:

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>

    <p>下面显示注册组件:</p>
    <div style="border: 1px solid red">
      <!-- vue内置的组件component, 可以动态显示组件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>
<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

注意:

  • is只能是动态属性=》:is="组件注册后的标签名字符串或data变量"
  • 不能直接拿注册标签名赋值使用

小结:

vue内置component组件, 配合is属性, 设置要显示的组件标签名字

组件进阶-keep-alive组件

目标:

掌握组件缓存的使用

背景:

组件切换会导致组件被频繁销毁和重新创建, 大多数情况下是有自己的意义的,但也可能会导致不必要的性能损耗

演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程

keep-alive

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

格式:

演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁

补充生命周期:

  • activated - 激活
  • deactivated - 失去激活状态
<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

小结:

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

组件进阶-keep-alive组件-指定缓存

目标:

掌握keep-alive的include属性的用法

语法:

  • include="组件名1,组件名2..."
  • :include="['组件名1', '组件名2']"
<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

注意:

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)

组件进阶 - 默认插槽

目标:

掌握组件插槽的使用

理解:

生活中的插槽

vue中的插槽

  • 组件通过插槽传入自定义结构
  • 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
  • vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽

格式

在定义组件时,在template中用slot来占个坑;

使用时,将组件之间的内容来填坑;

组件进阶-具名插槽

目标:

掌握具名插槽的使用

背景:

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

格式

使用:

<template #xxx>;

图示:

  • 传入的标签可以分别派发给不同的slot位置
  • v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)

示例:

1.子组件-Pannel2.vue

<div class="container" v-show="isShow">
    <slot name="one"></slot>
    <slot name="two"></slot>
</div>

2 .父组件-UseSlot2.vue

v-slot可以简化成#使用

v-bind可以省略成:

v-on: 可以省略成@

v-slot: 可以简化成#

写法1:

<Pannel2>
    <template v-slot:one>
		<img src="../assets/mm.gif" alt="" />
    </template>
    <template v-slot:two>
		<span>我是文字哦</span>
    </template>
</Pannel2>

写法2:

<Pannel2>
    <!-- 简化写法 -->
    <template #one>
		<div>
            <p>寒雨连江夜入吴,</p>
            <p>平明送客楚山孤。</p>
            <p>洛阳亲友如相问,</p>
            <p>一片冰心在玉壶。</p>
        </div>
    </template>
    <template #two>
		<img src="../assets/mm.gif" alt="" />
    </template>
</Pannel2>

小结:

  • slot有可以设置多个
  • 定义组件时:slot的name属性起插槽名
  • 使用组件时, template配合#插槽名传入具体html标签或组件

组件进阶-作用域插槽(难点)

目标:

掌握作用域插槽的用法

目标: 子组件中的数据, 在给插槽赋值时在父组件环境下使用=> 子传父=》传数据

步骤:

  • 创建子组件, 准备slot, 在slot上绑定属性和子组件值
  • 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"
  • 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置

示例:

具名插槽, 给slot绑定属性和值:

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <!-- 给slot上补充自定义的属性 -->
    <slot name="content" :a="1" :b="2">
      默认内容
    </slot>
  </div>
</template>

<script>
export default {
}
</script>

父组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>45-插槽-作用域插槽</h1>
    <MyCom>
      <!--
        v-slot:插槽名="对象"
      对象会自动接收这个插槽传递回来自定义属性
      -->
      <template v-slot:content="scope">
        <!-- <h1>自定义的内容,填坑, {{scope}}</h1> -->
        <h3>{{scope.a}}</h3>
        <p>{{scope.b}}</p>
      </template>
    </MyCom>
  </div>
</template>
<script>
// 父传子
//  1.传数据。 自定义属性    (父)  props(子)
//  2.传结构。 在组件中写内容(父)  slot (子)
import MyCom from './MyCom.vue'
export default {
  components: { MyCom }
}
</script>

<style scoped>
.content{
background-color: #ccc;
}
</style>

小结:

组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字="变量" ,变量上就会绑定slot传递的属性和值

自定义指令-基本使用

自定义指令文档(了解)

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

  • html+css+js的复用的主要形式是组件
  • 你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令

作用:

扩展标签额外的功能

自定义指令-定义方式

{
  data(){},
  methods: {},
  directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    },
  },
}

示例 自动获取焦点

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

<script>
export default {
  // 注册
  directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    }
  }
}
</script>

自定义指令-传值和更新

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

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

main.js定义处修改一下:

directives: {
  "color":{
    inserted(el, binding){ // 插入时触发此函数
      el.style.color = binding.value;
    },
    update(el, binding){ // 更新绑定的变量时触发此函数=》手动更新
      el.style.color = binding.value;
    }
  }
}

Direct.vue处更改一下:

<p v-color="theColor" @click="changeColor">使用v-color指令控制颜色, 点击变蓝</p>
<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>

总结:

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

到此这篇关于vue.js动态组件和插槽的使用汇总的文章就介绍到这了,更多相关vue.js动态组件和插槽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue默认插槽,具名插槽,作用域插槽定义及使用方法

    目录 一.三种插槽的定义 1.默认插槽 2.具名插槽 3.作用域插槽 二.使用方法 1.默认插槽 2.具名插槽 3.作用域插槽 应用场景: 插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据 一.三种插槽的定义 插槽分为三种: 默认插槽 具名插槽 作用域插槽 1.默认插槽 [定义:默认插槽是将父组件的结构和数据插入子组件中,默认插槽只有一个插入位置,要插入的html结构和data数据必须在父组件中,不过css可以在子组件中][简述:将父组件的自定义html和data插入子

  • Vue.js slot插槽的作用域插槽用法详解

    目录 没有插槽的情况 Vue2.x 插槽 有插槽的情况 具名插槽 没有slot属性 插槽简单实例应用 作用域插槽 ( 2.1.0 新增 ) Vue3.x 插槽 插槽 作用域插槽 没有插槽的情况 <div id="app"> <child> <span>1111</span> </child> </div> <script> // 注册子组件 Vue.component("child"

  • vue.js父子组件通信动态绑定的实例

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id='app'> <!--这里的作用是将父组件渲染到页面上--> <father></father> </d

  • vue2中插槽(slot)的基本使用规范

    目录 前言 基础slot组件(匿名插槽) 具名插槽 作用域插槽 解构插槽 总结 前言 在vue的开发过程中,我们会经常使用到vue的slot插槽组件,vue官方文档的描述: Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将元素作为承载分发内容的出口 slot大概分为以下几种: 基础slot组件(匿名插槽) 匿名插槽主要使用场景并不涉及特别复杂的业务,更像是纯展示组件内容 <!--子组件--> <template>   

  • Vue.js的动态组件模板的实现

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式 我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat

  • vue.js 动态组件详解

    :is 动态组件 使用 v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: <div id="app"> <test v-bind:is="which_to_show"></test> </div> <script> var demo = new Vue({ el: "#app", data: { which_to_show: "f

  • Vue.js动态组件解析

    本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: 改变挂载的组件,

  • 前端架构vue架构插槽slot使用教程

    目录 1.直接使用 2.设置默认值 3.多个slot用法 4.作用域插槽 5.动态插槽名 1.直接使用 新建组件 Article <template> <div> 日期:2022-01-15 <slot></slot> </div> </template> 新建 Learn,并在 Learn 中使用 Article Learn.vue 和 Article.vue 在同一文件夹下 <template> <div>

  • vue.js动态组件和插槽的使用汇总

    目录 组件进阶-props校验 props校验 组件进阶 - 动态组件 组件进阶-keep-alive组件 keep-alive 组件进阶-keep-alive组件-指定缓存 组件进阶 - 默认插槽 格式 组件进阶-具名插槽 组件进阶-作用域插槽(难点) 自定义指令-基本使用 自定义指令-定义方式 示例 自动获取焦点 自定义指令-传值和更新 组件进阶-props校验 props校验 普通格式: props: ["propA", "propB"].没有类型检查 高阶格

  • Vue 自定义动态组件实例详解

    现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js

  • Vue.js函数式组件的全面了解

    目录 前言 React 函数式组件 Vue(2.x) 中的函数式组件

  • Vue.js递归组件构建树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component> }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜

  • 用 Vue.js 递归组件实现可折叠的树形菜单(demo)

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component>` }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形

  • vue使用动态组件实现TAB切换效果

    问题描述 tab切换的场景在开发中会经常用到.当需要实现这种效果的时候,我们常常会想到下面的方式去实现这个效果. 方式一 使用display:none;去控制dom元素的显示与隐藏.从而实现,两个tab的显示与隐藏.不过如果有三四个tab要切换的话,这种方式就不可取了. 方式二 使用vue中的指令v-if或者v-show实现.这种方式可以实现,不过代码写的不优雅.试想一个.vue文件中出现一大把v-if是什么样的效果?而且使用v-if还得声明很多的变量去做标识.所以不是十分好的的解决方案 方式三

  • vue.js动态设置VueComponent高度遇到的问题及解决

    目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list">     <div ref="abc">{{data.id}}</div> &

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

随机推荐