組件通信方式（一）-創(chuàng)新互聯(lián)

一、event深入 1、事件注意事項

事件：1、系統(tǒng)事件：點擊、雙擊、鼠標(biāo)系列等等

創(chuàng)新互聯(lián)網(wǎng)絡(luò)公司擁有10余年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，上千客戶的共同信賴。提供網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)站開發(fā)、網(wǎng)站定制、外鏈、建網(wǎng)站、網(wǎng)站搭建、響應(yīng)式網(wǎng)站、網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

?2、自定義事件? ?

事件源（事件給誰綁定的）、事件類型（單擊還是雙擊還是自定義等）、事件回調(diào)

1）原生DOM ----- （eg: button）可以綁定系統(tǒng)事件(單擊、雙擊等等)

2）組件標(biāo)簽 -------? event1可以綁定系統(tǒng)事件（但是不起作用，因為屬于自定義事件）

???????-------? 在原生事件后加“.native”，可以把自定義事件變?yōu)樵鶧OM事件

注意：給原生DOM綁定自定義事件是沒有任何意義的，因為沒有辦法觸發(fā)$emit函數(shù)

二、v-model

v-model它是vue框架中的指令，它主要結(jié)合表單元素一起使用（文本框、復(fù)選框、單選按鈕等等）

它主要的作用是收集表單數(shù)據(jù)

原生DOM當(dāng)中是有oninput事件，它經(jīng)常結(jié)合表單元素一起使用，當(dāng)表單元素文本內(nèi)容發(fā)生變化的時候就會觸發(fā)一次回調(diào)

vue2中：可以通過value與input事件實現(xiàn)v-model的功能（ :value是單向綁定）

//v-model方式實現(xiàn)數(shù)據(jù)雙向綁定{{msg}}
//原生的方式實現(xiàn)數(shù)據(jù)雙向綁定    
//  :value是只能單向綁定{{msg}}

 data() {
     return {
        msg:''
    }
 }

v-model實現(xiàn)原理：是通過value與input事件實現(xiàn)的，而且還需要注意可以通過v-model實現(xiàn)父子組件數(shù)據(jù)同步。

v-mode實現(xiàn)父子之間的通信如下：

// 父組件  
// 注意：  :value是props   @input是自定義事件
// 以下兩行代碼等同//子組件

三、屬性修飾符sync

可以實現(xiàn)父子組件數(shù)據(jù)同步

:money.sync的含義：

1、父組件給字符串傳遞props (money)

2、給當(dāng)前子組件綁定了一個自定義事件，而且事件名稱即為update:money（update:事件名）

以下兩種方式效果一樣

// 父組件

    小明的爸爸現(xiàn)在有{{money}}元
    不使用sync修飾符使用sync修飾符//子組件 1

    小明每次花100元爸爸還剩 {{money}} 元
  

//子組件2

    小明每次花100元爸爸還剩 {{money}} 元

四、$attrs與$listeners

他們兩者是組件實例的屬性，可以獲取到父組件給子組件傳遞的props與自定義事件

具體用法如下：下面案例是對elementUI中的el-button按鈕的二次封裝

//父組件//子組件

五、$children與$parent

ref 可以獲取到某一個組件的子組件

$children組件實例的屬性也可以獲取到當(dāng)前組件的全部子組件（返回的是一個數(shù)組）

$parent組件實例的屬性可以獲取到當(dāng)前子組件的父組件，進(jìn)而可以操作父組件的數(shù)據(jù)與方法

案例如下：

父組件代碼

子組件Son

子組件Daughter

六、混入mixin

如果項目當(dāng)中出現(xiàn)很多結(jié)構(gòu)類似功能，要想到組件復(fù)用

如果項目當(dāng)中很多的組件JS業(yè)務(wù)邏輯相似，要想到mixin。

案例：就拿上面的案例來說道說道，把相同的代碼封裝到一起，然后引用，引用這里我就直接在上面的案例引入了，只需要兩部：

1、import myMixin from "@/pages/Communication/ChildrenParent/myMixin/myMixin";

2、mixins: [myMixin],

下面是封裝好的js文件。

export default {
    methods: {
        giveMoney(money) {
          this.money -= money;
          this.$parent.money += money;
        },
      },
}

七、插槽

可以實現(xiàn)父子組件通信（通信的是結(jié)構(gòu)），插槽有三種：

1、默認(rèn)插槽

2、具名插槽

3、作用域插槽：子組件的數(shù)據(jù)來源于父組件，但是子組件決定不了自身的結(jié)構(gòu)與外觀

案例如下（此案例為作用域插槽，其他的后續(xù)再補(bǔ)充）：

父組件：

子組件List:

子組件List1:

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

網(wǎng)頁標(biāo)題：組件通信方式（一）-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article24/iosce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、云服務(wù)器、網(wǎng)站維護(hù)、面包屑導(dǎo)航、電子商務(wù)、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容