vue-其他子组件向父组件传值.html

虾米大王

于 2023-05-29 10:06:32 发布

阅读量57

点赞数

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

本文链接：https://blog.csdn.net/modern358/article/details/130135420

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
        <son @func="show"></son>
        <div class="parent">{{name}} <span v-if="dataFormSon.name">有一个儿子叫{{dataFormSon.name}},今年{{dataFormSon.age}}岁了</span></div>
    </div>

    <template id="tmpl">
        <div class="son">
            <h3>子组件</h3>
            <input type="button" value="找父亲" @click="myclick">
        </div>
    </template>

    <script src="../js/vue.js"></script>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                name:'郭靖',
                dataFormSon:{}
            },
            methods:{
                show(data){
                    this.dataFormSon = data;
                }
            },
            components:{
                son:{
                    template:'#tmpl',
                    data(){
                        return {
                            sonmsg :{
                                name:'郭破虏',
                                age:6
                            }
                        }
                    },
                    methods:{
                        myclick(){
                           this.$emit('func',this.sonmsg);
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>