I'll explain better with an example:

<template>
    <Comp prop="ex" @click.native="log" />
</template>

Having this component in my app is there a way to get the prop value from the script with something like this? (Expecting "ex" to log):

<script>
    import Comp from './components/Comp.vue'

    export default {
        components: {
            Comp
        },
        methods: {
            log() {
                console.log(Comp.prop)
            }
        }
    }
</script>

And if there is a way, does it change when having multiple instances of the same component?

CodePudding user response：

In this example prop prop is hard-coded to be ex string. This value is available in Comp child but not in the parent. In order to access it in the parent, it should available in parent's state:

data() {
  return {
    compPropValue: 'ex'
  }
},
methods: {
    log(value) {
        console.log(value)
    }
}

And used like:

<Comp :prop="compPropValue" @click.native="log(compPropValue)" />

CodePudding user response：

It just occurred to me that I can simply pass the value that I need as a parameter of the function:

<template>
    <Comp prop="ex" @click.native="log("ex") />
</template>

<script>
    import Comp from './components/Comp.vue'

    export default {
        components: {
            Comp
        },
        methods: {
            log(s) {
                console.log(s)
            }
        }
    }
</script>

If someone knows how to actually do what I wanted it would still be helpful though!