### 一、父子組件介紹 ### 二、Vue3.x組件自定義事件實現子組件給父組件傳值 **注意：** Vue官方推薦你始終使用 **kebab-case 的事件名**。 **子組件DatePicker.vue** ~~~ <template> <button @click="run">通過廣播方式實現子組件給父組件傳值</button> </template> <script> export default { // 建議定義所有發出的事件，以便更好地記錄組件應該如何工作。 emits: ["run-parent"], data() { return {} }, methods: { run() { this.$emit("run-parent", "這是子組件穿過來的值") } } } </script> ~~~ **父組件Home.vue** ~~~ <template> <div> <date-picker @run-parent="getChild"> </date-picker> </div> </template> <script> import DatePicker from "./DatePicker" export default { data() { return { title: "你好vue" } }, components: { DatePicker }, methods: { getChild(data) { alert(data) } } } </script> <style lang="scss"> </style> ~~~ ### 三、Vue3.x組件自定義事件驗證 **子組件：** ~~~ <template> <input type="text" v-model="username" /> <br> <br> <input type="text" v-model="password" /> <br> <br> <button @click="run">通過廣播方式實現子組件給父組件傳值</button> </template> <script> export default { // 建議定義所有發出的事件，以便更好地記錄組件應該如何工作。 emits: { submit: ({ username, password }) => { if (username && password) { return true } else { console.warn('傳入的參數不能為空!') return false } } }, data() { return { username: "張三", password: "" } }, methods: { run() { this.$emit("submit", { username: this.username, password: this.password }) } } } </script> ~~~ **父親組件：** ~~~ <template> <div> <login @submit="getChild"> </login> </div> </template> <script> import Login from "./Login" export default { data() { return { title: "你好vue" } }, components: { Login }, methods: { getChild(data) { alert(data) } } } </script> <style lang="scss"> </style> ~~~ ### 四、vue3.x第三方插件mitt 實現非父子組件傳值 [https://github.com/developit/mitt](https://github.com/developit/mitt) Vue3.x以后從實例中移除了 `$on`，`$off` 和 `$once` 方法，`$emit` 仍然是現有 API 的一部分，只能實現子組件觸發父組件的方法。 **使用mitt之前先安裝mitt模塊** ~~~ npm install --save mitt ~~~ #### 3.1、新建model/event.js ~~~ import mitt from 'mitt' const VueEvent = mitt(); export default VueEvent; ~~~ #### 3.2、Header組件 ~~~ <template> <div> <button @click="doLogin">非父子組件傳值</button> </div> </template> <script> import VueEvent from '../model/event' export default { data() { return {} }, methods: { doLogin() { VueEvent.emit("login"); } } } </script> ~~~ #### 3.3、Login組件 ~~~ <template> 我是用戶登錄組件 </template> <script> import VueEvent from '../model/event' export default { mounted() { VueEvent.on("login", () => { alert("doLogin") }) } } </script> ~~~