在vue自定義元件上使用v model

2021-09-11 03:16:51 字數 656 閱讀 2560

應用背景:在引用的元件上使用v-model

我們都知道vue2.0之後,子元件不允許修改父元件傳遞的資料(prop)

很多同學第乙個想到的是這樣實現

使用$emit()在子元件中發布乙個方法並將子元件的值作為引數,在父元件訂閱此方法,獲取子元件傳遞過來的值,從而實現雙向繫結
在頁面中引用元件

定義platebox元件

name: 'plate-box',

data () ;

},props: ,

watch: ,

immediate: true // 立即執行

},isfocus:

}}

在元件上使用v-model就相當於

為了避免衝突,可以在元件中定義props 和 event

name: 'plate-box',

data () ;

},model: ,

props: ,

watch: ,

immediate: true // 立即執行

},isfocus:

}}

vue 使用自定義元件

新建專案,ctrl r進入cmd,切換至工作目錄 c users asus f f cd study f study cd vue f study vue cd demo 安裝 vue cli npm install g vue cli?target directory exists.continu...

vue在自定義元件中使用v model

要想解釋清楚v model在自定義元件中的用法,我們得先來看看普通的元件傳值 一 普通的元件傳值 如下 這是乙個簡單的父子,子父傳值示例 父元件 我是父元件 子元件 我是子元件 回應在上面的傳值當中我們只是父向子,子向父各傳值一次,但是需要起四個左右的名字 如果使用v model的話,還可以讓自己的...

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...