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

Vue JS 发出函数

聖光之護

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

转载

461人浏览过

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

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

php商城系统

PHP商城系统是国内功能优秀的网上商城系统，同时也是一个商业的PHP开发框架，有多套免费模版，强大的后台管理功能，专业的网上商城系统解决方案，快速建设网上购物商城、数码商城、手机商城、办公用品商城等网站。 php商城系统v3.0 rc6升级 1、主要修复用户使用中出现的js未加载完报错问题，后台整改、以及后台栏目的全新部署、更利于用户体验。 2、扩展出，更多系统内部的功能，以便用户能够迅速找到需

查看详情

-从“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 和我们的数据
- 最后我们调用了emit可选名称下的两个函数，我们可以在控制台上看到结果

谢谢大家的关注

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