| vue3组件化开发常用API | 您所在的位置：网站首页 › vue常用知识点 › vue3组件化开发常用API |
vue3组件化开发常用API
|
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情 组件化思想为什么使用组件化开发？ 当前前端比较流行的 Vue React 等框架，都会通过编写组件来完成业务需求，也就是组件化开发。包括小程序开发也会用到组件化开发的思想。 分析组件化思想开发应用程序： 将一个完整页面拆分成很多个小组件 每个组件用于完成页面的一个功能模块 每一个组件还可以细分 （父子组件） 通用的组件可以复用到不同的页面一个 Vue 的页面，应该像是棵嵌套的组件树的形式来组织： vue3 入口文件： import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); 复制代码createApp()函数传入了一个App，App 就是一个组件，是项目的根组件。 下面将分析 Vue3 中组件化开发的常用方法。 组件通讯 $props $props 用于向子组件传递数据$props: {{$props}} 复制代码 语法糖中需要使用 definePropsApi获取props const props = defineProps({ num: Number, }) 复制代码 $emits $emit 用于调用父级组件的方法 add 复制代码 语法糖中需要使用 defineEmitsApi声明emits {{ num }} const emits = defineEmits(['add']) function add() { emits('add') } 复制代码 $parent $parent用于获取父组件实例对象。中组件实例不会暴露出来，直接在模板中使用$parent会返回一个空对象。 为了在 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏： const parData = ref("父组件数据"); defineExpose({ parData, }) 复制代码子组件： 父组件 parData: {{$parent.parData}} 复制代码 $attrs 包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。子组件： 复制代码在父组件中，$attrs 的值就是 { "a": "a", "b": "b" }。 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用，举个例子：父组件： 复制代码子组件 Bar.vue 将$attrs对象绑定到当前标签 复制代码在浏览器查看DOM，age 和 sex作为属性被绑定到了这个p标签上面。 中，需要使用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用于内容分发，将 元素作为承载分发内容的出口。 SlotComp 组件 复制代码使用上面的组件 head插槽 foot插槽 复制代码SlotComp 组件中带 name属性的 slot插槽内容，会被替换。被替换的内容 需要在父组件中使用 v-slot指令为插槽提供想要显示的内容。 渲染作用域 foot插槽 {{msg}} {{items}} 复制代码上面的例子，{{items}} 不会显示数据。 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。 作用域插槽让插槽的内容访问子组件才有的数据： 复制代码插槽内容： {{i}} 复制代码绑定在 元素上的 attribute 被称为插槽 prop。现在，在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字，本例中就是slotProps。 v-model 表单组件 将 v-model 应用在表单上面，实现双向绑定： 复制代码 自定义组件 将 v-model 应用在自定义组件上面：父组件中使用自定义组件： const msg = ref('hello world!'); 复制代码相当于： 复制代码自定义组件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.vue中： const props = defineProps({ show: Boolean }) const emits = defineEmits([ "update:show", ]) 复制代码 样式绑定相关 CSS 中使用 JS 变量Vue3 新增语法，可以在 Css 中 使用变量。 const color = ref('blue') 复制代码 h1 { color: v-bind(color); } 复制代码 classclass绑定：根据需求动态绑定class样式时可以使用一下几种方法 写法1：对象语法 点击切换我的文体颜色样式 const isActive = ref(false); const changeColor = () => { isActive.value = !isActive.value; } 复制代码写法2：对象语法 点击切换颜色，根据计算属性 const isActive2 = reactive({ active: false, }) const classObj = computed(() => { return { active: isActive2.active, 'font-30': true, } }) const changeColor2 = () => { isActive2.active = !isActive2.active } 复制代码写法3：数组语法 复制代码三目运算符写法 复制代码数组语法中结合对象语法使用 复制代码 style动态绑定行内style样式 三种方式：html代码 style绑定 复制代码style对象绑定(直接绑定到一个对象，代码更清新) 复制代码style数组绑定 复制代码js 代码 const colorRed = ref('#f00') const styleObj = reactive({ fontSize: '30px', }) const styleObjRed = reactive({ color: '#f00', }) 复制代码代码demo地址 github.com/kongcodes/v… 从0开始vue3项目搭建 |
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |