文章阅读

沉浸阅读完整内容

写文章

vue 组件通信传递参数(子传父)

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

1.定义子组件 MyButton.vue 用$emit方法传递 里面2个值,参数一:挂载到自定义组件上的函数名,第二个是要传递的值

this.$emit("axxx", data)
<template>
    <div>
        <button @click="btn">按钮</button>
    </div>
</template>

<script>
export default {
    data: () => ({
        data: "子传父"
    }),
    methods: {
        btn() {
            this.$emit("axxx", data)
        }
    }

}
</script>

2.父组件接收

在父组件上自定义函数名

<template>
    <div>
        <mybutton @axxx="goto"/>
    </div>
</template>

<script>
export default {
    data: () => ({
        data: "子传父"
    }),
    methods: {
        goto(val) {
            console.log(val);
        },

}
</script>

@自定义函数名 = "自定义的函数" 这里挂在的什么函数名,子组件传递的时候,就要写什么函数名,"="是自定义的函数,可以通过回调来接收传递的参数

推荐阅读

4 篇精选
文章 / 103vuex使用 文章 / 106解决vuex刷新页面数据丢失 文章 / 105echarts如何根据窗口大小自适应 文章 / 104日期格式转换 yyyy-MM-dd

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取