vue3组件化开发常用API知识点总结

目录
  • 组件化思想
  • 组件通讯
    • $props
    • $emits
  • $parent
    • $attrs
    • proviede & inject
  • 插槽 slot
    • 渲染作用域
    • 作用域插槽
  • v-model
    • 表单组件
    • 自定义组件
    • 改变默认参数
  • 样式绑定相关
    • class
    • style
  • 总结

组件化思想

为什么使用组件化开发?

当前前端比较流行的 Vue React 等框架,都会通过编写组件来完成业务需求,也就是组件化开发。包括小程序开发也会用到组件化开发的思想。

分析组件化思想开发应用程序:

  • 将一个完整页面拆分成很多个小组件
  • 每个组件用于完成页面的一个功能模块
  • 每一个组件还可以细分 (父子组件)
  • 通用的组件可以复用到不同的页面

一个 Vue 的页面,应该像是棵嵌套的组件树的形式来组织:

vue3 入口文件:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

createApp()函数传入了一个AppApp 就是一个组件,是项目的根组件。

下面将分析 Vue3 中组件化开发的常用方法。

组件通讯

$props

  • $props 用于向子组件传递数据
<p> $props: {{$props}} </p>
  • <script setup> 语法糖中需要使用 definePropsApi获取props
const props = defineProps({
  num: Number,
})

$emits

  • $emit 用于调用父级组件的方法
<button @click="$emit('add')">
  add
</button>
  • <script setup> 语法糖中需要使用 defineEmitsApi声明emits
<button @click="add">{{ num }}</button>

const emits = defineEmits(['add'])
function add() {
  emits('add')
}

$parent

  • $parent用于获取父组件实例对象。

<script setup> 中组件实例不会暴露出来,直接在模板中使用$parent会返回一个空对象。

为了在 <script setup> 组件中明确要暴露出去的属性,使用 defineExpose 编译器宏:

const parData = ref("父组件数据");
defineExpose({
  parData,
})

子组件:

<p>父组件 parData: {{$parent.parData}}</p>

$attrs

  • 包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。

子组件:

<Foo a="a" b="b" :num="num" @add="add" />

在父组件中,$attrs 的值就是 { "a": "a", "b": "b" }

  • 当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用,举个例子:

父组件:

<Bar :age=18 sex="boy" />

子组件 Bar.vue

<p v-bind="$attrs">将$attrs对象绑定到当前标签</p>

在浏览器查看DOM,age 和 sex作为属性被绑定到了这个p标签上面。

  • <script setup>中,需要使用useAttrs
import { useAttrs } from 'vue';

const attrs = useAttrs();
console.log(attrs.sex); // boy

proviede & inject

  • 用于跨层级/多层级的组件通信
  • 父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。

父级组件:

provide("user", "kong");
provide("pass", 123456);

子孙级组件:

const user = inject("user");
const pass = inject("pass");

插槽 slot

用于内容分发,将 <slot> 元素作为承载分发内容的出口。

SlotComp 组件

<template>
  <div :style="s1">
    <slot name="head"></slot>
  </div>
  <div :style="s2">
    <slot name="foot"></slot>
  </div>
</template>

使用上面的组件

          <SlotComp>
            <template v-slot:head>
              <p>head插槽</p>
            </template>
            <template v-slot:foot>
              <p>foot插槽</p>
            </template>
          </SlotComp>

SlotComp 组件中带 name属性的 slot插槽内容,会被替换。被替换的内容 需要在父组件中使用 v-slot指令为插槽提供想要显示的内容。

渲染作用域

            <template v-slot:foot>
              <p>foot插槽</p>
              {{msg}}
              {{items}}
            </template>

上面的例子,{{items}} 不会显示数据。

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

作用域插槽

让插槽的内容访问子组件才有的数据:

<slot name="head" :item="items"></slot>

插槽内容:

            <template v-slot:head = "slotProps">
              <p v-for="i in slotProps.item">{{i}}</p>
            </template>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在,在父级作用域中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字,本例中就是slotProps

v-model

表单组件

  • v-model 应用在表单上面,实现双向绑定:
<input v-model="text" />

自定义组件

  • v-model 应用在自定义组件上面:

父组件中使用自定义组件:

const msg = ref('hello world!');

<ModelComp v-model="msg"></ModelComp>

相当于:

          <ModelComp
            :modelValue="msg"
             @update:modelValue="msg = $event"
          >
          </ModelComp>

自定义组件ModelComp.vue中:

const props = defineProps({
  modelValue: String
})
const emits = defineEmits([
  "update:modelValue"
])

const text = ref("请输入..");

// text改变时执行
watch(text,()=>{
  emits("update:modelValue",text.value);
})

改变默认参数

  • 未设置参数时如上,默认绑定的参数是 modelValue update:modelValue

设置v-model参数:

<ModelComp v-model:show="show"></ModelComp>

相当于:

          <ModelComp
            :show="showFlag"
             @update:show="showFlag = $event"
          >
          </ModelComp>

自定义组件ModelComp.vue中:

const props = defineProps({
  show: Boolean
})
const emits = defineEmits([
  "update:show",
])

样式绑定相关

class

class绑定:根据需求动态绑定class样式时可以使用一下几种方法

写法1:对象语法

<button @click="changeColor" :class="{ active: isActive }">
    点击切换我的文体颜色样式
</button>

const isActive = ref(false);
const changeColor = () => {
  isActive.value = !isActive.value;
}

写法2:对象语法

<button @click="changeColor2" :class="classObj">
          点击切换颜色,根据计算属性
</button>

const isActive2 = reactive({
active: false,
})
const classObj = computed(() => {
return {
  active: isActive2.active,
  'font-30': true,
}
})
const changeColor2 = () => {
isActive2.active = !isActive2.active
}

写法3:数组语法

<div :class="[activeClass, errorClass]"></div>

三目运算符写法

<div :class="[isActive ? activeClass : '', errorClass]"></div>

数组语法中结合对象语法使用

<div :class="[{ active: isActive }, errorClass]"></div>

style

动态绑定行内style样式

三种方式:html代码

      <p :style="{ color: colorRed }">style绑定</p>
      <p :style="styleObj">style对象绑定(直接绑定到一个对象,代码更清新)</p>
     <p :style="[styleObj, styleObjRed]">style数组绑定</p>

js 代码

const colorRed = ref('#f00')
const styleObj = reactive({
  fontSize: '30px',
})
const styleObjRed = reactive({
  color: '#f00',
})

代码demo地址 github.com/kongcodes/v…

从0开始vue3项目搭建

总结

到此这篇关于vue3组件化开发常用API知识点总结的文章就介绍到这了,更多相关vue3组件化开发API内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3中的组合式 API示例详解

    目录 为什么要有组合式 API? 更好的逻辑复用 更灵活的代码组织 更好的类型推导 生产包体积更小 与选项式 API 的关系 组合式 API 是否覆盖了所有场景? 可以同时使用两种 API 吗? 选项式 API 会被废弃吗? 组合式 API 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件.它是一个概括性的术语,涵盖了以下方面的 API: 响应性 API:例如ref()和reactive(),使我们可以直接创建响应式状态.计算属性和侦听器. 生命周期钩子:例如o

  • vue3常用的API使用简介

    vue3.x已经发布了这么久,相关的生态也慢慢起来了,包括vite这个新的打包工具,在vue3.0学习过程中有一些实用性的api对比,希望能在开发中给大家做个示范,准确的使用对应的api去完成我们的项目开发 生命周期的变更 要特别说明一下的就是,setup 函数代替了 beforeCreate 和 created 两个生命周期函数,因此我们可以认为它的执行时间在beforeCreate 和 created 之间 Vue2 Vue3 beforeCreate setup created setup

  • vue3组件化开发常用API知识点总结

    目录 组件化思想 组件通讯 $props $emits $parent $attrs proviede & inject 插槽 slot 渲染作用域 作用域插槽 v-model 表单组件 自定义组件 改变默认参数 样式绑定相关 class style 总结 组件化思想 为什么使用组件化开发? 当前前端比较流行的 Vue React 等框架,都会通过编写组件来完成业务需求,也就是组件化开发.包括小程序开发也会用到组件化开发的思想. 分析组件化思想开发应用程序: 将一个完整页面拆分成很多个小组件 每

  • vue3组件化开发之可复用性的应用实例详解

    目录 自定义指令 基本结构 自定义 v-loading 指令 插件 基本结构 实现一个全局状态管理插件 Teleport 传送 相关链接 总结 可复用性也是组件化开发的一个优势,能让代码更加简洁优雅.方便维护.下面主要写了vue3中能体现出复用性的一些API的应用. 自定义指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute. v-text v-show v-if ... 等是 vue 中内置的一些指令,当这些内置指令无法满足我们的要求时,这时候也可以使用自定义指令

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • 详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • React组件化的一些额外知识点补充

    目录 React的额外补充 Portals的使用 Fragment的使用 严格模式StrictMode 总结 React的额外补充 Portals的使用 某些情况下,我们希望渲染的内容独立于父组件,甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM 元素上的). Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案: 第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment; 第二个参数(conta

  • Vue组件化开发思考

    一般说到组件,我首先想到的是弹窗,其他就大脑空白了. 因为觉得这个是在项目中最常用的功能,提取出来方便复用的才是组件- 然而我才发现这个想法是有问题的. 我发觉可能从意识上把Vue的组件和UI库的组件(弹窗之类的)混淆了... 缘起于最近的一个表单开发,页面上有2个是联动菜单的选项. 首先想到的是,这个样式和选择地址的那个联动菜单,完全一样哈- (废话,同一个项目 当然要保持ui风格的相同啊!) 不过差别在于 我这个是 一个1级 一个2级, 地址那个是4级的. 然后我就想着把那个地址的组件引进来

  • webpack-mvc 传统多页面组件化开发详解

    最近有一个项目,还是使用的传统 MVC 模式开发,完全基于jQuery,使用了基于java模板引擎velocity,页面中嵌入了大量java语法,使得前后端分离不彻底,工程打包上线苦不堪言,为实现后端为服务化,前端也得彻底从后端中分离出来. 方案: webpack4 + ejs webpack 打包所有的 资源 打包所以的 脚本 打包所以的 图片 打包所以的 样式 打包所以的 表 ejs 高效的 JavaScript 模板引擎,代替 velocity webpack 配置 基本插件 @babel

  • Vue-router 类似Vuex实现组件化开发的示例

    本文介绍了Vue-router 类似Vuex实现组件化开发的示例,分享给大家,具体如下: 随着项目越来越大,把所有route写在一个文件里就显得杂乱. #单个组件路由 import a from '../components/a' export default { path: '/a', name: 'a', component: a } import arouter from 'xxx' export default new Router({ routes: [ arouter ] }) #多

  • Android组件化开发路由的设计实践

    调研了一下目前的路由框架,ARouter(阿里的),ActivityRouter都使用了apt技术 编译时注解,个人想法是一口吃不成胖子,先做个比较实用的. VpRouter路由框架主要应用于组件化开发中 设计目的 解耦 跨模块跳转 方便服务器配置schema,实现动态配置跳转目标 对外部提供远程访问的功能,实现跨应用调用响应 主要功能点 支持intent,http,schema三种跳转 路由表支持xml配置,可自定义,支持多路径 有拦截器 同时支持反射和隐式意图 支持结果回调 支持参数传递 链

  • iOS组件化开发实战记录

    1. 组件化需求来源 起初的这个项目,App只有一条产品线,代码逻辑相对比较清晰,后期随着公司业务的迅速发展,现在App里面承载了大概五六条产品线,每个产品线的流程有部分是一样的,也有部分是不一样的,这就需要做各种各样的判断及定制化需求.大概做了一年多后,出现了不同产品线提过来的需求,开发人员都需要在主工程中开发,但是开发人员开发的是不同的产品线,也得将整个工程跑起来,代码管理.并行开发效率.分支管理.上线时间明显有所限制.大概就在去年底,我们的领导提出了这个问题,希望作成组件化,将代码重构拆分

随机推荐