CODEWITHSUNDEEP
vue.js
Weekeong
Weekeong

Reputation: 27

How to pass an imported function(not method) as a prop

when passing dynamic props, we use : or v-bind. However, any variables within these v-binds refers to the data stored within the component rather than within the script (passes on data in the component that can be referenced using "this.data".

However, that is not what I want to do in this case, I want to pass down an imported function into a prop, which is referenced within the component without a "this." in front of the function. When I try to pass it on as a prop, it says "functionName" is defined but never used", how do you go about passing on imported functions as dynamic props? See the code below for more details.

<template>
    <componentName 
        :propName="functionName"
    />
</template>

<script>
import {functionName} from "./helperFunctions.js"
export default {
    components: {componentName}
}

Upvotes: 0

Views: 466

Answers (1)

Sina
Sina

Reputation: 1135

why not passing as an event? however you can pass this function as a prop via getters:

<template>
  <componentName 
    :propName="myFuncProp"
  />
</template>
<script>
import {functionName} from "./helperFunctions.js"
export default {
  components: {componentName},
  computed: {
    myFuncProp () {
      return functionName
    }
  }
}
</script>

Upvotes: 1

Related Questions