Vue-组件通信-props和$emit

不妨萌一点

于 2020-02-04 22:18:14 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qw782669218/article/details/104176105

1 篇文章

订阅专栏

本文详细介绍了Vue.js中父子组件间通信的两种主要方式：props和$emit。通过实例展示了如何使用props从父组件向子组件传递数据，以及如何利用$emit从子组件向父组件发送数据。深入探讨了props的用法、监听和操作方法，以及$emit触发事件的实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

props

用于父传子

父组件：在子组件标签中自定义一个属性（:content=""）进行传值（content）

<D :content="content" @getD="get"></D>

子组件：在子组件中创建rops属性，然后在属性中添加接收的自定义属性名

props:{
                content:String,
            },

方法有很多，比如创建一个值存储，也可以用计算属性去操作，但我更推荐用监听方法watch去操作

watch: {
                content(){
                    this.mm = this.content
                },
            },

用于子传父

子组件：创建一个事件，用$emit('父组件事件名', 值)触发父组件事件进行传值

methods: {
                putC:function(e){
                    this.$emit('getD',this.msgD)
                },
            },

父组件：在子组件标签中，用v-on创建一个自定义事件（@getD=""）去触发一个方法

<D :content="content" @getD="get"></D>

methods: {
                get:function(val){
                    this.msgC = val
                }
            },