Vue JS 发出函数-js教程-PHP中文网

Vue JS 发出函数

聖光之護

发布： 2024-11-16 22:42:02

转载

459人浏览过

我们使用 emit 函数将数据从子组件传递到父组件，我们将向您展示它如何在代码中进行
我们从子组件启动 emit 函数

<template>
    <div>
        <div class="child component">
            <h1>d component</h1>
            <h2>{{ count }}</h2>
            <button @click="senddate">send count</button>
        </div>
    </div>
</template>

<script setup>

import {defineemits, ref} from "vue";

const count=ref(0);

const emit=defineemits();

const users=[
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"it"
    },
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"it"
    },
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"it"
    },
    {
        id:1,
        name:"khusi",
        age:20,
        profession:"it"
    },
]

const senddate=()=>{
    emit("counter", 11);
    emit("users", users);
}

</script>

登录后复制

现在我们可以将它们传递给父组件

<template>
    <div>
        <div class="Parent component">
            <h1>c Component</h1>
            <ComponentD @counter="submitEmit" @users="submitUser"/>
        </div>
    </div>
</template>

<script setup>
import {defineEmits} from "vue";
import ComponentD from "./d-component.vue";

const emit=defineEmits();

const submitEmit=(e)=>{
    console.log(e);
    emit("counter", e)

}

const submitUser=(e)=>{
    console.log(e);
    emit("users", e);
}

</script>

登录后复制

结果是

image description

让我们了解它是如何工作的

WiseHome家政预约小程序

家政服务平台系统包含家用电器安装清洗、搬家、家电维修、管道疏通、月嫂保姆、育儿陪护、上门开锁等多种服务项目，用户可以直接通过家政小程序咨询，在线预约服务类型，同时还设置有知识科普，给用户科普一些清洁保养小技巧，让用户能够足不出户就可以直接预约服务，方便又快捷。本项目使用微信小程序平台进行开发。使用腾讯专门的小程序云开发技术，云资源包含云函数，数据库，带宽，存储空间，定时器等，资源配额价格低廉，无需

查看详情

-从“vue”导入{defineemits, ref}；从vue导入必要的东西
- const count=ref(0);创建一个可变量并使用 ref
为其指定默认值
- 常量发射=defineemits();它必须在任何可验证的
中声明defineemits - 常量用户=[
{id:1, 姓名:"khusi", 年龄:20, 职业:"it"},
{id:1, 姓名:"khusi", 年龄:20, 职业:"it"},
{id:1, 姓名:"khusi", 年龄:20, 职业:"it"},
{id:1, 姓名:"khusi", 年龄:20, 职业:"it"},
] 从任何数据中使用
- const senddate=()=>{
发出（“计数器”，11）；
发出（“用户”，用户）；
我们创建一个函数，并在第一个可选数字中给出它，在defineemits中的第二个数据中给出它，并在字符串中我们编写在父组件中使用的可选名称
我们学习如何在父组件中调用它们

-const submitemit=(e)=>{
console.log(e);
发出（“计数器”，e）
}
-const submituser=(e)=>{
console.log(e);
发出（“用户”，e）；
创建了两个函数，在其中我们从子组件调用我们的emit变量，并给出它们的名称和e。在本例中，e=我们的可选数字 11 和我们的数据
- <componentd @counter="submitemit" @users="submituser"/> 最后我们调用了emit可选名称下的两个函数，我们可以在控制台上看到结果

谢谢大家的关注

以上就是Vue JS 发出函数的详细内容，更多请关注php中文网其它相关文章！