Vue3.X的父子组件、自定义组件，非父子组件获取与传值

标签：amp   component   model   target   通过   v-model   lin   ref   color   

父组件获取子组件的数据和执行子组件方法

1. 调用子组件的时候定义一个 ref

<v-header ref="header" />

2. 父组件获取子组件数据

this.$refs.header.属性

3. 父组件执行子组件的方法

this.$refs.header.方法

子组件获取父组件的数据和执行父组件方法

1. 子组件获取父组件的数据

this.$parent.数据

2. 子组件获取父组件的方法

this.$parent.方法

Vue3.x 父组件自定义事件，子组件给父组件传值

1. 子组件获取父组件的方法
   父组件中声明自定义方法

<template>
    <div>
        <v-header @send="getChild"></v-header>
    </div>
</template>
<script>
import Header from "./Header"

export default {
    data() {
        return {
            title: "首页组件"
        }
    },
    methods: {
        getChild(data) {
            console.log(data + "home")
        }
    },
    components: {
        "v-header": Header
    }
}
</script>

<style lang="scss">
</style>

子组件通过this.$emit调用该自定义的方法

<template>
    <div>
        <h2>头部组件
            --- <button @click="sendParent">执行父组件的自定义事件</button>
        </h2>
    </div>
</template>
<script>
export default {
    // 建议定义所有发出的事件，以便更好地记录组件应该如何工作
    emits: ["send"],
    data() {
        return {
            msg: "头部组件"
        }
    },
    methods: {
        sendParent() {
            // this.$emit("send")
            this.$emit("send", this.msg)
        }
    }
}
</script>

<style lang="scss">
h2 {
    text-align: center;
    background: #000;
    height: 44px;
    line-height: 44px;
    color: white;
}
</style>

非父子组件传值

1. 非父子组件传值，借用 mitt 三方件
2. 先安装 mitt 插件：
   npm install mitt --save
3. 实例化 mitt
   mitt 的使用：<https://www.npmjs.com/package/mitt

import mitt from ‘mitt‘;

const event = mitt();

export default event;

4. 组件 A

<template>
    <div>
        <h2>头部组件
            ----- <button @click="sendLogin">触发登录组件里面的事件 实现传值</button>
        </h2>
    </div>
</template>
<script>
import event from "../model/event"

export default {
    data() {
        return {
            msg: "头部组件"
        }
    },
    methods: {
        sendLogin() {
            //广播事件
            event.emit("toLogin", {
                username: "张三",
                age: 20
            })
        }
    }
}
</script>

<style lang="scss">
h2 {
    text-align: center;
    background: #000;
    height: 44px;
    line-height: 44px;
    color: white;
}
</style>

5. 组件 B

<template>
    <div class="login">
        <input type="text" v-model="username" placeholder="用户名" />
        <br>
        <input type="text" v-model="password" placeholder="密码" />
        <br>
        <button @click="doLogin">执行登录</button>
    </div>
</template>
<script>
import event from "../model/event"
export default {
    emits: {
        submit: ({ username, password }) => {
            if (username !== "" && password !== "") {
                return true
            } else {
                console.log("用户名密码不能为空")
                return false
            }
        }
    },
    data() {
        return {
            username: "",
            password: ""
        }
    },
    methods: {
        doLogin() {
            this.$emit("submit", {
                username: this.username,
                password: this.password
            })
        }
    },
    mounted() {
        //监听广播
        event.on("toLogin", (data) => {
            console.log(data)
        })
    }
}
</script>

<style lang="scss">
.login {
    padding: 20px;
}
</style>

持续更新中......

Vue3.X的父子组件、自定义组件，非父子组件获取与传值

标签：amp   component   model   target   通过   v-model   lin   ref   color   

原文地址：https://www.cnblogs.com/lhongsen/p/14815609.html