组件传值之子传父

最新推荐文章于 2024-08-18 13:53:12 发布

gunsmoke

最新推荐文章于 2024-08-18 13:53:12 发布

阅读量118

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/gunsmoke/article/details/106186745

版权

vue学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="main">
    <!--这里要么写成parent,要么写成parent($event),不能写成parent(),这样写会收不到子组件传过来的值-->
    <child @child-emit="parent"></child>
    <div>{{childPassParent}}</div>
</div>

<script>
    Vue.component('child',{
        template:`
            <div>
                {{childText}}
                <button @click="childClick()">child-click</button>
            </div>
        `,
        data() {
            return {
                childText: '子组件文本'
            }
        },
        methods: {
            childClick() {
                let value =  '子组件传递过来的数值:' + Math.random();
                this.$emit('child-emit',value);
            }
        }
    });

    new Vue({
        el: '#main',
        data: {
            childPassParent: ''
        },
        methods: {
            parent(event) {
                console.log(event);
                this.childPassParent = event;
            }
        }
    })
</script>

</body>
</html>