技術標籤：switchpreference 事件template js 定義變數vue @click 多個事件vue click事件傳引數vue3.x components 如何定義

自定義事件

除了系統自帶的原生 DOM 自帶的事件之外，有時候我們需要用到這些自帶的事件之外，我們就必須要自定義事件了。

事件名

不同於元件和 prop，事件名不存在任何自動化的大小寫轉換。而是觸發的事件名需要完全匹配監聽這個事件所用的名稱。舉個例子，如果觸發一個 camelCase 名字的事件，我們還是接著昨天的專案繼續往下寫，在 TestCom.vue 使用 button 按鈕點選事件分發一個 click-event

<template>
<divclass="test-com-wrap">
{{title}}
<button@click="click">按鈕button>
 
div>
template>
<script>exportdefault{name:"TestCom",props:{title:{type:String,default:"",
},
},
created(){console.log(this.$attrs)
},methods:{
click(e){this.$emit('click-event',e)
}
}
};script>

然後我們在 TemplateM.vue 來接收這個事件：

<template>
<divclass="template-m-wrap">
 
<test-comtitle="這個是元件"data-status="active"
@click-event="clickEvent"
>test-com>
div>
template>
<script>importTestComfrom"./TestCom";exportdefault{name:"TemplateM",components:{
TestCom,
},
data(){return{};
},methods:{
clickEvent(e){console.log("e===>",e.target)
}
},
};script>

檢視瀏覽效果：

定義自定義事件

繼續上面的程式碼，可以通過 emits 選項在元件上定義已經發出的事件：

<template>
<divclass="test-com-wrap">
{{title}}
<button@click="click">按鈕button>
div>
template>
<script>exportdefault{name:"TestCom",props:{title:{type:String,default:"",
},
},emits:['click-event'],
created(){console.log(this.$attrs)
},methods:{
click(e){this.$emit('click-event',e)
}
}
};script>

驗證丟擲的事件

與 prop 型別驗證類似，如果使用物件語法而不是陣列語法定義發出的事件，則可以驗證它。

要新增驗證，將為事件分配一個函式，該函式接收傳遞給 $emit 呼叫的引數，並返回一個布林值以指示事件是否有效，在 main.js 寫下如下程式碼：

import{createApp}from'vue/dist/vue.esm-bundler.js'
importAppfrom'./App.vue'
importrouterfrom'./router'
importstorefrom'./store'
letapp=createApp(App)
app.use(store).use(router).mount('#app')
app.component('custom-form',{
template:`

在 TemplateM.vue 寫下程式碼：

<template>
<divclass="template-m-wrap">
<custom-form@submit="submit">custom-form>
div>
template>
<script>exportdefault{name:"TemplateM",components:{
},
data(){return{};
},methods:{
submit(options){console.log(options)
}
},
};script>

我們檢視效果如下：

v-model 引數

在本例中，子元件將需要一個 foo prop 併發出 update:foo 要同步的事件，還是在 main.js ：

import{createApp}from'vue/dist/vue.esm-bundler.js'
importAppfrom'./App.vue'
importrouterfrom'./router'
importstorefrom'./store'
letapp=createApp(App)
app.use(store).use(router).mount('#app')
app.component('my-component',{
props:{
foo:String
},
template:`type="text"
:value="foo"
@input="$emit('update:foo',$event.target.value)">
`
})

預設情況下，元件上的 v-model 使用 modelValue 作為 prop 和 update:modelValue 作為事件。我們可以通過向 v-model 傳遞引數來修改這些名稱：

<template>
<divclass="template-m-wrap">
<my-componentv-model:foo="bar">my-component>
div>
template>
<script>exportdefault{name:"TemplateM",components:{
},
data(){return{bar:'dsdsdd'
};
},methods:{
submit(options){console.log(options)
}
},
};script>

檢視效果如下：

多個 v-model 繫結

通過利用以特定 prop 和事件為目標的能力，正如我們之前在 v-model 引數中所學的那樣，我們現在可以在單個元件例項上建立多個 v-model 繫結。

每個 v-model 將同步到不同的 prop，而不需要在元件中新增額外的選項：

import{createApp}from'vue/dist/vue.esm-bundler.js'
importAppfrom'./App.vue'
importrouterfrom'./router'
importstorefrom'./store'
letapp=createApp(App)
app.use(store).use(router).mount('#app')
app.component('user-name',{
props:{
firstName:String,
lastName:String
},
template:`type="text"
:value="firstName"
@input="$emit('update:firstName',$event.target.value)">type="text"
:value="lastName"
@input="$emit('update:lastName',$event.target.value)">
`
})

在 TemplateM.vue :

<template>
<divclass="template-m-wrap">
<user-namev-model:first-name="firstName"v-model:last-name="lastName"
>user-name>
div>
template>
<script>exportdefault{name:"TemplateM",components:{
},
data(){return{firstName:'dsdsdd',lastName:'Ken'
};
},methods:{
submit(options){console.log(options)
}
},
};script>

效果如下：