vue中使用$emit子组件给父组件传参以及使用ref和$refs父组件调用子组件方法

原创已于 2022-01-19 16:45:40 修改 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-01-18 21:50:00 首次发布

vue小知识专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue.js中如何通过$emit事件触发器从子组件向父组件传递参数，以及如何利用ref和$refs在父组件中调用子组件的方法。详细阐述了不同参数传递方式及父组件接收时的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$emit子组件给父组件传参

1.子组件不传递参数，父组件也不接受参数

// 子组件
<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
  name: 'Children',
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {
    testEmit() {
      this.$emit('test')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <children @test="test" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
  name: 'Father',
  components: { children },
  methods: {
    test() {
      console.log('test');
    }
  }
}
</script>

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

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
  name: 'Children',
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {
    testEmit() {
      this.$emit('test', 'this is children')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
  name: 'Father',
  components: { children },
  props: {},
  data() {
    return {}
  },
  methods: {
    test(val) {
      console.log(val); //this is children
    }
  }
}
</script>

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

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
  name: 'Children',
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {
    testEmit() {
      this.$emit('test', 'this is children1', 'this is children2')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test(arguments)" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
  name: 'Father',
  components: { children },
  props: {},
  data() {
    return {}
  },
  methods: {
    test(val) {
      console.log(val); // Arguments { 0: "this is children1", 1: "this is children2"}
      console.log(val[0]); // this is children1
      console.log(val[1]); // this is children2
    }
  }
}
</script>

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

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
  name: 'Children',
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {
    testEmit() {
      this.$emit('test', 'this is children')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test($event, 'father')" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
  name: 'Father',
  components: { children },
  props: {},
  data() {
    return {}
  },
  methods: {
    test(childParam, fatherParam) {
      console.log(childParam); // this is children
      console.log(fatherParam); // father
    }
  }
}
</script>

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

<template>
  <div>
    <jc-button @click="testEmit">click</jc-button>
  </div>
</template>
<script>
export default {
  name: 'Children',
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {
    testEmit() {
      this.$emit('test', 'this is children1', 'this is children2')
    }
  }
}
</script>

<template>
  <div>
    <children @test="test(arguments, 'father')" />
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
  name: 'Father',
  components: { children },
  props: {},
  data() {
    return {}
  },
  methods: {
    test(childParam, fatherParam) {
      console.log(childParam); // Arguments { 0: "this is children1", 1: "this is children2"}
      console.log(childParam[0]); // this is children1
      console.log(childParam[1]); // this is children2
      console.log(fatherParam); // father 

    }
  }
}
</script>

ref 和 $refs父组件调用子组件方法

<template>
  <div>
    <children ref="childRef" />
    <jc-button @click="test">click</jc-button>
  </div>
</template>
<script>
import children from '@/views/children.vue'
export default {
  name: 'Father',
  components: { children },
  props: {},
  data() {
    return {}
  },
  methods: {
    test() {
      this.$refs.childRef.testRef() // this is child
    }
  }
}
</script>

<template>
  <div>
    child
  </div>
</template>
<script>
export default {
  name: 'Children',
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {
    testRef() {
      console.log('this is child');
    }
  }
}
</script>