24.Vue.js :子组件传值给父组件

最新推荐文章于 2023-07-07 19:25:45 发布

屋顶上的小喵

最新推荐文章于 2023-07-07 19:25:45 发布

阅读量1.1k

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/vivian_1122/article/details/88773440

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

$emit（）

子组件传值给父组件需要用到 $emit()方法
这个方法可以传递两个参数：一个事件名称，一个是需要传递的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <title>子组件传值给父组件</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        Vue.component('father', {
            template: '<div>我是父组件<p>我忘记了我的儿子叫{{mySonName}}</p><son @tellFatherMyname="getMySonName"></son></div>',
            data() {
                return {
                    mySonName: ''
                }
            },
            methods: {
                getMySonName(data) {
                    console.log(data)
                    this.mySonName = data
                }
            },
            components: {
                son: {
                    data() {
                        {
                            return {
                                myName: '小明'
                            }
                        }
                    },
                    template: '<button @click="emitMyName">我是儿子，我的名字叫{{myName}}</button>',
                    methods: {
                        emitMyName() {
                            //子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，
                            //一个是需要传递的数据
                            this.$emit('tellFatherMyname', this.myName)
                        }
                    },
                }
            }

        })

        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

屋顶上的小喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
24.Vue.js :子组件传值给父组件

$emit（）子组件传值给父组件需要用到 $emit()方法这个方法可以传递两个参数：一个事件名称，一个是需要传递的数据<!DOCTYPE html><html lang="en"><head> <title>子组件传值给父组件</title> <meta charset="UTF-8">...
复制链接

扫一扫