一拜马、父子組件介紹

二考抄、Vue3.x組件自定義事件實現(xiàn)子組件給父組件傳值

注意： Vue官方推薦你始終使用 kebab-case 的事件名细疚。

子組件DatePicker.vue

<template>
<button @click="run">通過廣播方式實現(xiàn)子組件給父組件傳值</button>
</template>

<script>
export default {
    // 建議定義所有發(fā)出的事件，以便更好地記錄組件應(yīng)該如何工作川梅。
    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">通過廣播方式實現(xiàn)子組件給父組件傳值</button>
</template>

<script>
export default {
    // 建議定義所有發(fā)出的事件然遏，以便更好地記錄組件應(yīng)該如何工作。
    emits: {
        submit: ({
            username,
            password
        }) => {
            if (username && password) {
                return true
            } else {
                console.warn('傳入的參數(shù)不能為空!')
                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 實現(xiàn)非父子組件傳值

https://github.com/developit/mitt

Vue3.x以后從實例中移除了 $on待侵，$off 和 $once 方法，$emit 仍然是現(xiàn)有 API 的一部分姨裸，只能實現(xiàn)子組件觸發(fā)父組件的方法秧倾。

使用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>