5

I am learning VueJs, in this sandbox https://codesandbox.io/s/o29j95wx9 it has lines like this

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    }
  },
  computed: {
    listeners () {
      return {
        // Pass all component listeners directly to input
        ...this.$listeners,
        // Override input listener to work with v-model
        input: event => this.$emit('input', event.target.value)
      }
    }
  }
}
</script>

What does the ... in ...this.$listeners, do? I tried searching for it but every search engine filters out that query. I don't know what it's called.

I also see it used in vuex like this

computed: {
   ...mapGetters({
      currentData: 'viewerGetCurrentDocument',
      folders: 'viewerGetFoldersList'
   }),
Trevor
  • 2,273
  • 1
  • 23
  • 35
  • 3
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax – Niet the Dark Absol Aug 23 '18 at 13:30
  • 1
    In your case above, the `...` in `...this.$listeners` will behave like an `Object.assign` in the sense that you are mapping the keys/values of the object (`this.$listeners`) to your new object. (Either adding or overwriting the `input` property on the new object you re returning.) – bradcush Aug 23 '18 at 13:33
  • 1
    Also possible duplicate of [What do these three dots in React do?](https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do) – Igor Aug 23 '18 at 13:37

2 Answers2

1

It's the spread operator. It deconstructs an object or array into its constituent properties or elements, so that they can be used in places where those things are normally comma-separated, like function argument lists, or inside object and array literals.

Will Cain
  • 1,903
  • 8
  • 18
1

This is called spread operator more info you can see here https://davidwalsh.name/spread-operator

You can combine arrays and merge objects.

Also you can use it in function declaration parameters:

function f(...args) {
  // args is array here
}

It can be used in multiple context but you can research in the links

user2693928
  • 3,158
  • 1
  • 11
  • 19
  • Thank you, is there an es5 equivalent? – Trevor Aug 23 '18 at 14:13
  • 1
    Not exactly because it's syntactical. You can transform es6 to es5 with babeljs or use regular es6. For equivalents this will be helpful https://github.com/addyosmani/es6-equivalents-in-es5 – user2693928 Aug 23 '18 at 14:24