What are the common API knowledge points for vue3 component development?

Component-based thinking Why use component-based development?

Currently popular front-end frameworks such as Vue React will complete business requirements by writing components, which is component-based development. Including small program development, the idea of component development will also be used.

Analyze componentized ideas to develop applications:

Split a complete page into many small components

Each Each component is used to complete a functional module of the page

Each component can also be subdivided (parent and child components)

General components can be duplicated Use different pages

A Vue page should be organized like a nested component tree:

vue3 Entry file:

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

createApp(App).mount('#app'); createApp() The function passes in an App , App is a component and is the root component of the project.

The following will analyze the common methods of component development in Vue3 .

Component communication $props ##$props Used to pass data to sub-components

$props: {{$props}}

You need to use defineProps Api to get props

const props = defineProps({ num: Number, }) ## in syntactic sugar #$emits ##$emit Method used to call the parent component add

You need to use defineEmits Api statement emits ## {{ num }}

const emits = defineEmits(['add']) function add() { emits('add') } $parent in syntactic sugar $parent is used to obtain the parent component instance object.

The component instance will not be exposed, and using $parent directly in the template will return an empty object. In order to specify the properties to be exposed in the component, use the

defineExpose compiler macro: const parData = ref("父组件数据"); defineExpose({ parData, }) Subcomponent: 父组件 parData: {{$parent.parData}}

$attrs

Contains attribute bindings and events in the parent scope that are not components props or custom events. Sub component:

In the parent component, the value of $attrs is

{ "a": "a", "b": "b" } . When a component does not declare any props, this will contain the bindings of all parent scopes and can be passed through

v-bind="$attrs" Enter internal components - This is very useful when creating higher-order components, for example: Parent component:

Child component Bar.vue

将$attrs对象绑定到当前标签

View the DOM in the browser, age and sex are bound to the

p tag as attributes. ##

, you need to use useAttrs import { useAttrs } from 'vue';

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

For cross-level/multi-level component communication The parent component has a provide

option to provide data, Child components have an inject option to start using this data. Parent component: provide("user", "kong"); provide("pass", 123456);

Children component: const user = inject("user"); const pass = inject("pass"); Slot

is used for content distribution, will

The element serves as an outlet for carrying distribution content. SlotComp Component

Use the above component head插槽

foot插槽

SlotComp

The component has the name

attribute The contents of the slot slot will be replaced. The replaced content needs to use the v-slot directive in the parent component to provide the slot with the content you want to display. Rendering scope foot插槽

{{msg}} {{items}} In the above example, {{items}}

will not display data. All content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope.

Scope slot Let the slot content access the data only available in the subcomponent:

Slot content: {{i}}

The attribute bound to the

element is called the slot prop

. Now, in the parent scope, we can use v-slot with a value to define the name of the slot prop we provide, in this case slotProps . v-model Form component

Apply v-model to the form to achieve two-way binding: 自定义组件 将 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", ]) 样式绑定相关 class class绑定：根据需求动态绑定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', })