vue3 元件的v model實現

2022-09-20 20:24:10 字數 807 閱讀 7014

在vue2中,v-model="val"是 :value="val"和@input="val=$event.target.value"的語法糖

vue2的自定義元件的v-model

input元件

//

父元件//

子元件

特殊的元件,比如checkbox元件,通過model屬性指定prop引數和event事件

//

父元件//

子元件export

default

, model:

methods:

}}

vue3的v-model在vue2的元件使用v-model很麻煩,而且只能繫結乙個v-model,在vue3中對v-model進行了很大改變,不需要用model指定引數和事件

//

父元件

//子元件//

1、定義prop屬性引數

const props = defineprops<>();

//2、定義emit名稱,update+prop屬性

const emit = defineemits(['update:modelvalue']);

//3、繫結input事件,修改提交父元件修改屬性值,checked事件同理

const updateval = (e: event) =>;

Vue 3 元件註冊

上一節實驗中,我們大概了解了一下元件的基礎,這一節實驗我們要深入元件註冊。我們在註冊元件的時候,我們都會給元件起乙個名字,就好像我們人的名字一樣。需要注意的是,我們的元件名字是有一些規範的,一般這種單檔案元件,我們強烈推薦使用字母全小寫且必須包含乙個連字元,全部小寫字母,單詞使用中華線 隔開。例如我...

vue3 元件通訊 vue router

關於元件通訊 1.父子元件間傳值 props emit parent children ref 2.非父子元件傳值 事件匯流排 原理就是建立乙個公共的js檔案,專門用來傳遞資訊 import vue from vue export default new vue 在需要傳遞訊息的地方引入 impor...

Vue3元件傳參

總結沒啥好說的,淦就完事了,按照自己的認知簡單的整理了一下vue3的元件傳參 如下 示例 子元件 click childemit 傳值給父元件button div template export default return script 父元件 my emit parentemit child d...