当前位置: 代码迷 >> 综合 >> Vue-组件通信-props和$emit
  详细解决方案

Vue-组件通信-props和$emit

热度:27   发布时间:2023-12-14 00:30:46.0

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}},

 

简单实例

  相关解决方案