Vue-组件通信-props和$emit

props

用于父传子

用法

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

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

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

props:{
                content:String,
            },

操作props

---

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

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

简单实例

$emit

用于子传父

用法

子组件：创建一个事件，用$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
                }
            },

简单实例