国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

在如今的前端開發(fā)工作中， 組件之間的參數(shù)傳遞是一個(gè)非常常見的問題

Vue 2 已經(jīng)有了一套非常實(shí)用的組件傳參機(jī)制，Vue 3 在原本的基礎(chǔ)上做了些改進(jìn)

一、父組件傳參到子組件

在《Vue3.x 從零開始（二）—— 重新認(rèn)識(shí) Vue 組件》中已經(jīng)介紹過 Props

這是最常用的父對(duì)子傳參方式 

上面演示的參數(shù)只是簡(jiǎn)單的字符串，也可以通過 v-bind 指令傳入 Number、Function、Object 等類型

除了傳遞基本的參數(shù)之外，props 還可以用來傳遞組件

由于組件是變量的形式傳入，所以在子組件中需要?jiǎng)討B(tài)渲染組件，這就會(huì)用到內(nèi)置組件 <component />

<component /> 組件會(huì)接收 is 參數(shù)，并基于這個(gè)參數(shù)渲染組件，所以我們只要通過 is 屬性傳入組件變量即可

子組件定義 prop：

父組件傳入組件： 

在父組件部分，我們需要把 Alert 組件傳給子組件，所以需要引入組件之后，將 Alert 組件保存到 data

data 是具有響應(yīng)性的，而組件作為變量傳遞的時(shí)候，是不需要具備響應(yīng)性的

所以我使用了 markRaw 方法來消除響應(yīng)性（ markRaw 會(huì)標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)轉(zhuǎn)換為代理，只返回對(duì)象本身）

而在 Vue 2.x 中并沒有類似的方法，會(huì)對(duì)整個(gè)組件做數(shù)據(jù)劫持，導(dǎo)致額外的性能開銷

在寫文的時(shí)候有同事提出了一個(gè)問題：prop 傳入組件和 slot 有什么區(qū)別？

slot 是在父組件中插入組件，被插入的內(nèi)容和子組件無關(guān)，所有邏輯都在父組件中完成

而 prop 傳入的組件恰恰相反，父組件只是決定傳入的內(nèi)容，相關(guān)邏輯是在子組件中完成

二、子組件傳參到父組件

子組件通常使用自定義事件的方式向父組件傳參，即 $emit

this.$emit('event-name', data);

$emit 函數(shù)接收的第一個(gè)參數(shù)是自定義的事件名稱，這個(gè)事件名稱建議采用全小寫的 kebab-case 事件名

除了事件名稱外，$emit 還可以接收數(shù)量不定的額外參數(shù)，這些額外參數(shù)會(huì)按順序傳遞給父組件的事件處理函數(shù)

來看一下自定義事件的完整用法，首先在子組件中通過 $emit 定義事件和需要傳遞的參數(shù)

然后在父組件中監(jiān)聽該事件，并通過事件處理函數(shù)接收子組件的傳參

通過 $emit 我們還可以做一些更厲害的事情，比如對(duì) prop 實(shí)現(xiàn)雙向綁定

prop 是單向下行綁定，也就是說，父級(jí) prop 的更新會(huì)在子組件中響應(yīng)，而子組件無法修改 prop 的值

如果子組件確實(shí)需要修改 prop 的值，需要使用 update:prop 事件

比如有一個(gè) prop 的屬性名為 text，我們可以在子組件中通過 $emit 觸發(fā) update:text 事件并傳參，然后在父組件進(jìn)行賦值

Vue 3 為了提升開發(fā)者的效率，還提供了 v-model 語法。在父組件中使用 v-model:prop ，就不需要監(jiān)聽 update 事件了

// Vue 2 中的 .sync 修飾符已移除

但子組件還是要用 $emit 觸發(fā) update 事件 this.$emit('update:text', data); 

如果是 Vue 2 的用戶，應(yīng)該已經(jīng)發(fā)現(xiàn) Vue 3 中 v-model 的用法已經(jīng)發(fā)生了改變

在 Vue 2 中，在組件上使用 v-model 相當(dāng)于綁定了一個(gè)屬性名為 value 的 prop，并監(jiān)聽了 input 事件

而在 Vue 3 中，v-model 相當(dāng)于傳遞了一個(gè)名為 modelValue 的 prop，并監(jiān)聽 update:modelValue 事件 

<child-component v-model="text" />
<!-- 在 Vue 3 中，這兩種寫法是等價(jià)的 -->
<child-component
  :modelValue="text"
  @update:modelValue="text = $event"
/>

也就是說，Vue 3 中的 v-model 是 prop + update 的語法糖，只是當(dāng) prop 被定義為 modelValue 的時(shí)候可以省略 :modelValue 

三、深層次的組件傳參

上面介紹是父子組件之間的數(shù)據(jù)傳遞，而對(duì)于深嵌套的祖孫組件：

App.vue
└─ Home.vue
   └─ Footer.vue
      ├─ FooterItem.vue
      └─ FooterTips.vue

像這樣的結(jié)構(gòu)，如果 Home 要傳遞一個(gè)參數(shù)給 FooterTips，繼續(xù)使用 prop 或者 $emit 就會(huì)很復(fù)雜

// 在 Vue 2 中可以使用 event bus 來處理，但 Vue 3 中移除了 $on、$off，所以已經(jīng)無法構(gòu)建 event bus 了

這時(shí)候可以使用 provide / inject

首先在孫組件 footer-tips 中通過 inject 定義需要傳入的參數(shù)，inject 可以是一個(gè)由屬性名組成的字符串?dāng)?shù)組

然后在祖父級(jí)組件中通過 provide 傳入對(duì)應(yīng)的參數(shù)

provide 也可以是一個(gè)對(duì)象，但為了更安全的開發(fā)組件，建議始終將 provide 定義為返回對(duì)象的函數(shù)

如果需要定義 inject 的默認(rèn)值，也可以像 props 一樣，將 inject 定義為對(duì)象：

inject: {
  author: {
    default: '這是一個(gè)沉默的作者',
  },
  // 如果是 Object 或者 Array 這種引用類型，需要用函數(shù)返回
  info: {
    default: () => ({
      name: 'wise',
      home: 'China',
    }),
  },
},

在上一篇博客《Vue3.x 從零開始（三）—— 使用 Composition API 優(yōu)化組件》中已經(jīng)介紹過 setup

如果需要在 setup 中使用 provide，需要引入 Vue 提供的 provide 全局方法：

import { provide, ref } from 'vue';

setup() {
  // 使用 ref 提供響應(yīng)性
  const author = ref('Wise.Wrong');
  // provide 可以定義兩個(gè)參數(shù)，分別為 key 和 value
  provide('author', author.value);
}

同樣的，setup 中的 inject 也需要全局引入

import { inject } from 'vue';

setup() {
  // inject 接收兩個(gè)參數(shù)，分別為 key 和默認(rèn)值，默認(rèn)值可以為空
  const author = inject('author', '這里是默認(rèn)值');
  return { author };
},

四、子組件傳參到子組件

在工作中經(jīng)常也會(huì)遇到平級(jí)的兩個(gè)組件組件的通信

App.vue
└─ Home.vue
  ├─ Header.vue
  └─ Footer.vue

比如這里的 Header 和 Footer 都是 Home 的子組件，F(xiàn)ooter 中有某個(gè)字段受 Header 的影響

對(duì)于這種情況，應(yīng)該將交互邏輯放到父組件中處理，這種思路叫做狀態(tài)提升

比如上圖的例子，可以在父組件 Home 中定義一個(gè)字段，通過 prop 傳入 Footer 組件

然后在 Header 組件中通過 $emit 觸發(fā)自定義事件，拋出需要傳遞給 Footer 的數(shù)據(jù)

同時(shí)在 Home 組件中監(jiān)聽該事件，并將接到的參數(shù)賦值到傳入 Footer 的 prop

子組件與子組件的通信，在實(shí)際業(yè)務(wù)場(chǎng)景中會(huì)有所不同，但只要牢記狀態(tài)提升，將交互邏輯放到父組件來處理，絕大部分情況都能迎刃而解

除了上面提到的情況外，還有可能遇到特別復(fù)雜的情況，比如：

1. 孫組件對(duì)祖父級(jí)組件傳參；

2. 孫組件對(duì)孫組件傳參。

通常來說，這些問題都可以通過良好的組件設(shè)計(jì)來規(guī)避

但隨著業(yè)務(wù)規(guī)模的不斷擴(kuò)大，有些復(fù)雜的業(yè)務(wù)場(chǎng)景確實(shí)需要直面這些問題，這時(shí)候就需要進(jìn)行狀態(tài)管理

Vue 團(tuán)隊(duì)開發(fā)了 Vuex 來集中式存儲(chǔ)和管理應(yīng)用中所有組件的狀態(tài)

在后面的文章中我會(huì)提到如何在 Vue 3 中使用 Vuex，但不會(huì)單獨(dú)介紹 Vuex 的用法

關(guān)于 Vuex 的基本用法可以參考我以前的博客《Vue 爬坑之路（四）—— 與 Vuex 的第一次接觸》

如果想更進(jìn)一步，建議閱讀 Vuex 的官方文檔~