vue中子组件给父组件传参

最新推荐文章于 2024-07-08 20:27:17 发布

weixin_50413563

最新推荐文章于 2024-07-08 20:27:17 发布

阅读量263

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_50413563/article/details/108295730

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

vue中子组件给父组件传参

1、在子组件中定义方法 this.$emit(‘事件名’,数据)
2、在占位符中 @事件名=‘父组件中的方法(方法不加括号)’
3、在父组件中定义方法,并且进行数据接收
4、在子组件中自调用第一步定义的方法。

案例：

 <body>
        <div id="app">
            <h1>这是父组件{{msg}}{{t}}</h1>
            <!--  2、在占位符中 @事件名='父组件中的方法(方法不加括号)' -->
            <v-header @send="get"></v-header>
        </div>

        <template id="header">
            <div @click="change()">
                这是子组件
                <!--  4、在子组件中自调用第一步定义的方法。 -->
                {{fn()}}
            </div>
        </template>

        <script src="js/vue.js"></script>
        <script>
            var header={
                template:'#header',
                data(){
                    return {
                        cmsg:'这是子组件的数据',
                        n:0
                    }
                },
                methods:{
                    change(){
                        this.n++
                    },
                    // 1、在子组件中定义方法 this.$emit('事件名',数据)
                    fn(){
                        this.$emit('send',this.cmsg,this.n)
                    }
                }
            }
            new Vue({
                el:'#app',
                components:{
                    'v-header':header
                },
                data:{
                    msg:'',
                    t:0
                },
                methods:{
            // 3、在父组件中定义方法,并且进行数据接收 
                    get(n,m){
                        this.t=m;
                        this.msg=n;
                        console.log(n)
                    }
                }
            })
        </script>
    </body>

weixin_50413563

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中子组件给父组件传参

vue中子组件给父组件传参1、在子组件中定义方法 this.$emit(‘事件名’,数据)2、在占位符中 @事件名=‘父组件中的方法(方法不加括号)’3、在父组件中定义方法,并且进行数据接收4、在子组件中自调用第一步定义的方法。案例： <body> <div id="app"> <h1>这是父组件{{msg}}{{t}}</h1> <!-- 2、在占位符中 @事件名='父组件中
复制链接

扫一扫

专栏目录