• Ajax
  • Ant design
  • Axios-Fetch
  • Avue
  • Browser
  • Canvas
  • CSS
  • Dos-bat
  • Dva
  • Dedecms
  • Echart
  • ElementUI
  • Editors
  • Git
  • GeoServer
  • GIS
  • H5
  • Jquery
  • Java安卓
  • Json
  • Javascript
  • Leaflet
  • Linux
  • Life-Info
  • Mock
  • MongoDB
  • Network
  • NodeJS
  • NPM
  • React
  • 设计运营
  • SEO
  • SVG
  • TypeScript
  • Tools
  • umi
  • uni-APP
  • Vant
  • Vue
  • Windows
  • webpack
  • 位置:OC中文网 > 其他 > Vue >

    vue子组件使用$emit 向父组件传递多个参数

    来源:openlayers-cesium.com 时间:06-28

    vue子组件使用$emit向向父组件传值时,可以传递一个参数,也可以传递多个参数,示例如下:

    传递一个参数:

    1. 子组件: 
    2. submit(){ 
    3.     this.$emit('submit',this.name) 
    4.  
    5. 父组件: 
    6. <foods  @submit="handelFoods"></foods> 
    7.  
    8. 父组件的方法中接收参数: 
    9. handelFoods(e) { 
    10.     console.log(e) 

    传递多个参数

    方法一:

    1. 子组件: 
    2. submit(){   this.$emit('submit',JSON.stringify(this.foods),this.name) 
    3.  
    4. 父组件: 
    5. <foods  @submit="handelFoods(arguments)"></foods> 
    6.  
    7. 父组件的方法中接收参数: 
    8. handelFoods(e) { 
    9.     // e[0]:第一个参数    e[1]  第二个参数 
    10.     console.log(e[0],e[1]) 

    方法二:

    1. 父组件: 
    2. <foods  @submit="handelFoods"></foods> 
    3.  
    4. handelFoods(e1,e2) { 
    5.     // e1:第一个参数    e2 第二个参数 
    6.     console.log(e1,e2)