vue3組件化開發常用API知識點有哪些-Vue.js-PHP中文網

元件化想法 為什麼要使用元件化開發？

目前前端比較流行的 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}}

登入後複製

語法糖中需要使用 defineProps Api取得props # const props = defineProps({ num: Number, }) 登入後複製

$emits $emit 用來呼叫父級元件的方法

add 登入後複製 語法糖中需要使用 defineEmits

Api宣告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", ]) 登入後複製 样式绑定相关 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', }) 登入後複製