gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1377
阅读:2249回复:1

vue中子组件使用$emit传值的种种情况,vue中$emit传递多个参数,传递数组

楼主#
更多 发布于:2022-07-22 14:41

vue中子组件使用$emit传值的种种情况


1、 子组件不传递参数,父组件也不接受参数
// 子组件
   this.$emit('test')
// 父组件
   @test='test'

   test() {
    
   }





2、 子组件传递一个参数,父组件接收时不带形参

// 子组件
    this.$emit('test','哈哈')
// 父组件
   @test='test'

   test(param) {
        console.log(param); // 哈哈
  },





3、 子组件传递多个参数,父组件接收时需要使用arguments作为形参。arguments是一个数组

// 子组件

this.$emit('test','哈哈1','哈哈2')
// 父组件
@test='test(arguments)'

test(params) {
        console.log(params[0]); // 哈哈1
         console.log(params[1]); // 哈哈2
},


3-2:子组件传递一个数组给父组件,父组件接收时需要使用arguments作为形参。arguments 默认就是一个数组(无需定义)

// 子组件

this.$emit('test',['哈哈1','哈哈2'])      //传数组
// 父组件
@test='test(arguments)'

test(params) {
        console.log(params);    // ['哈哈1','哈哈2']
},


4、 子组件传递一个参数,父组件在接收参数时还加上了自己的一个属性,那么父组件需要使用形参$event 来替代子组件传递的参数。

// 子组件
this.$emit('test','哈哈')
// 父组件
@test='test('呵呵',$event)'


test(myparam,param) {
     console.log(myparam); // 呵呵
     console.log(param); // 哈哈
},





5、 子组件传递多个参数时,父组件在接收参数时还加上了自己的一个属性,那么父组件需要使用形参arguments 来替代子组件传递的多个参数。

// 子组件
this.$emit('test','哈哈1','哈哈2')
// 父组件
@test='test(arguments,'哈哈3')'
test(params,myparam) {
     console.log(params[0]); // 哈哈1
     console.log(params[1]); // 哈哈2
     console.log(myparam); // 哈哈3
},
游客


返回顶部