关于vue组件传参

最新推荐文章于 2024-09-13 14:34:15 发布

日系少女小八嘎.

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量151

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/w2807585195/article/details/126019801

版权

本文介绍了如何在Vue应用中使用CounterCom组件，涉及父子组件间的props传递、自定义事件$emit和$on的使用。重点讲解了如何从父组件向子组件传递数值并更新，以及子组件通过$emit触发事件并回传数据给父组件。

摘要由CSDN通过智能技术生成

组件

CounterCom.vue

<template>
   <button>
      1
   </button>
</template>

App.vue

1. 导入
import CounterCom from './components/CounterCom.vue'
2. 注册
components:{CounterCom}
3. 使用
<CounterCom></CounterCom>

父传子 props

App.vue文件中
<CounterCom :num="1"></CounterCom>
1. 接收参数
props: {
  'num':{type:Number,default}
}

2. 使用参数num
data() {
  return {
      counter: this.num
  }
}

子传父 $emit


CounterCom.vue
<button @click="counter++;$emit('counterchange',counter)"></button>
App.vue
<CounterCom @counterchange="n=$event"></CounterCom>

$emit('事件名',事件值) 发送一次时间,事件名(counterchange)和事件值(counter)是自定义的
$event固定写法,事件的值(counterchange 事件的值,也是子组件$emit的第二个参数)