>[success] # emits Option ~~~ 1.emits 觸發當前實例上的事件。附加參數都會傳給監聽器回調，最常見的用處子傳父 2.'Vue 3'現在提供了一個emits選項，類似于現有props選項。此選項可用于定義組件可以向其父對象發出的事件, 這種使用是新增方法，之前的寫法依然可以在vue3.x中使用 ~~~ >[info] ## vue2.x 和 3.x 都通用的寫法 * 子組件 ~~~ <button @click="$emit('accepted',{ email: 'foo@bar.com', password: 123 })">ss</button> ~~~ * 父組件 ~~~ <template> <div> <my-button ref='mybutton' @accepted='accepted'></my-button> </div> </template> <script> import myButton from '../components/MyButton' export default { name: 'testlison', components: { myButton }, methods: { accepted() { console.log(1, 2, 3) } } } </script> ~~~ >[info] ## vue3.x 新增寫法 ~~~ 1.父組件調用觸發的地方用法沒變，新增的用法是在子組件多了一'emits'屬性 ~~~ >[danger] ##### 3.0寫法 ~~~ 1.和prop寫法類型，都支持定義（數組的形式）和驗證（對象的形式）兩種，如果你是用的是對象驗證 的形式方法返回必須要有boolean 返回值，參數是你傳入的值，下面案例為例說明 參數test打印的參數 ' {email: "foo@bar.com", password: 123}' 2.如果你沒參數驗證可以將value 定義為null 舉個例子 $emit('accepted') 沒有傳出參數，那么在emits 中定義為emits:{accepted:null} ~~~ ~~~ <template> <div id='outterId' value='outerValue41' class='outerClass'> <button @click="$emit('accepted',{ email: 'foo@bar.com', password: 123 // Type error! })">ss</button> </div> </template> <script> export default { // emits: ['accepted'] emits: { accepted: (test) => { console.log(test) // {email: "foo@bar.com", password: 123} return true } } } </script> ~~~ >[info] ## 我應該按照新的寫法還是以前 ~~~ 1.官網給的建議強烈建議您使用記錄每個組件發出的所有事件'emits'。這一點特別重要，因為去除了'.native'修飾劑。 'emits'現在，未使用聲明的事件的所有偵聽器都將包含在組件的中'$attrs'，默認情況下，該偵聽器將綁 定到組件的根節點 2.下面案例如果emit的是原生的事件（如，click）,就會存在兩次觸發。一次來自于$emit的觸發； 一次來自于根元素原生事件監聽器的觸發，解決方使用3.x新增的聲明emits 方式，注意下面的案例是注釋掉的 如果不想被觸發兩次需要配置'emits',注意這里指的是原生事件 3.如果父組件哪里不是原生事件不加' emits: ['click']' 只會觸發一次 <button @click="$emit('click1',{ email: 'foo@bar.com', password: 123 // Type error! })">ss</button> <my-button ref='mybutton' @click1='accepted'></my-button> ~~~ * 子組件 ~~~ <template> <button @click="$emit('click',{ email: 'foo@bar.com', password: 123 // Type error! })">ss</button> </template> <script> export default { // emits: ['click'] // emits: { // accepted: (test) => { // console.log(test) // return true // } // } } </script> ~~~ * 父組件 ~~~ <template> <div> <my-button ref='mybutton' @click='accepted'></my-button> </div> </template> <script> import myButton from '../components/MyButton' export default { name: 'testlison', components: { myButton }, methods: { accepted() { console.log(1, 2, 3) } } } </script> <style scoped lang="less"></style> ~~~