元件中props引數的應用

2022-08-29 00:21:17 字數 991 閱讀 4695

先來段官方文件的**:

vue.component('child', }'})

props引數是用來父傳子的。

在元件定義中採用駝峰式命名法,在父元件中用「-」來中間隔開,變數「mymessage」和「my-message」其實表示的是同乙個變數,在定義元件的時候要寫成駝峰式命名,在父元件中要用「-」隔開,在父元件中賦值傳參進入子元件。

下面舉個栗子:

確定重置返回

vue.component("m-modal",

},template:`

} 在這裡新增內容

`, methods:,

cancelhandle()

}});

var list = [...'妙味課堂'];

newvue(,

methods:,

cancel:

function

() }

});

將子元件定義中的modaltitle(預設值為「這是乙個模態框」)通過父元件中的屬性(modal-title變成父元件中的類似於屬性的東東)賦值:modal-title=「提醒」覆蓋掉了子元件中的預設值「這是乙個模態框」。當父元件中modal-title沒有賦值時,採用的是子元件的預設值。

子元件中的方法methods中的this.$emit("on-ok"),括號裡面的引數表示的是子元件事件名,表示的是觸發父元件中繫結的事件:v-on:on-ok="ok",ok事件是父元件vue例項中的方法。

綜上所述,子元件中的屬性:(1)props引數相當於子元件的屬性設定,可以在元件應用時自行設定屬性值也可以使用子元件定義時的預設值,父元件傳參的作用;(2)methods方法:相當於繫結事件,繫結帶有「on-ok」事件所在的作用函式,點選後觸發此繫結的作用函式,通過this.$emit("on-ok")和v-on:on-ok=「ok」再觸發父元件中的「ok」函式。

渲染結果:

元件的引數校驗與非props特性

父元件向子元件傳遞引數,子元件有權對這些引數進行約束,這些約束叫做引數的校驗。123 temp div vue.component temp template var vm newvue script 向上述這個 這麼寫,就會報錯 要求的是字串,傳遞過來的是數字。有的時候有這種需求,傳遞的資料要麼是...

Vue解決子元件修改父元件props引數不可逆問題

直接賦值props裡面資料會導致如下錯誤 解決這個bug有以下兩種方法,一 使用 emit函式 1 父元件可以使用 props 把資料傳給子元件。2 子元件可以使用 emit 觸發父元件的自定義事件 修改後 父元件 html methods methods 子元件 this.emit showsub...

Vue 元件引數校驗與非props特性

元件的引數校驗指的是什麼呢?你父元件向子元件傳遞的內容,子元件有權對這個內容進行一些約束,這個約束我們可以把它叫做引數的校驗。vue.component child let vm new vue 現在有這樣乙個需求,父元件呼叫子元件的時候,傳遞的這個content,我要做一些約束,要求它我傳遞過來的...