2

Parent Component: 

                <template>
                    <div id="user">
                    Hello there! {{msg}} {{name}}
                    You have below messages
                    <Message v-for='(msg,index) in messages' 
                        :messageText='msg' 
                        :messageNumber='index+1' 
                        :welcome-msg='{{msg}}'></Message>
                    </div>
                </template>

                <script>
                    import Message from "./Message.vue";
                    export default {
                        data () {
                            return {
                                msg: 'Welcome dear',
                                name: 'Max',
                                messages: [ 'Message 1', 'Message 2']
                            }
                        },
                        components: {
                            Message
                        }
                    }
                </script>

Child Component:

            <template>
                <div>
                    {{messageNumber}}. {{messageText}} - {{welcomeMsg}}
                </div>
            </template>

            <script>
                export default {
                    props: {
                        messageNumber: Number,
                        messageText: String,
                        welcomeMsg: String
                    }
                }
            </script>

I am trying to pass the data msg ('Welcome dear') from parent to the child. Is there a way to specify to access the parent msg for welcome-msg prop ?

Note: I am aware that I can make it work by changing the v-for like. I have just started learning Vue.js and curious to know if there is a way to access parent's data through some sort of scoping

<Message v-for='(item,index) in messages' 
                    :messageText='item' 
                    :messageNumber='index+1' 
                    :welcome-msg='msg'></Message>

Update: This is not a duplicate of variable shadowing, as with variable shadowing there is a way to invoke the global function using window.functionName. This question is specific to Vue.js & hence I am not convinced this is a duplicate.

Karthikeyan
  • 302
  • 1
  • 11
  • Looks like you've identified the problem and provided a solution. What's the problem now? Is this just academic? – Phil May 30 '18 at 04:50
  • Possible duplicate of [Variable shadowing in JavaScript](https://stackoverflow.com/questions/5373278/variable-shadowing-in-javascript) – Phil May 30 '18 at 05:00
  • @Phil - Yes, it is just academic. I have experience working with ractive where I could have achieved this using ~ for root/parent context. While this is not ideal, I am certainly positive that there would be a way to achieve this and hence posted the question in this forum – Karthikeyan May 30 '18 at 05:07

2 Answers2

1

curious to know if there is a way to access parent's data through some sort of scoping

This isn't possible. You need to choose a different variable name to distinguish between them.

You could do something like this, but it's not a better solution than just choosing a different name:

// At the beginning of your code somewhere...
Object.defineProperty(Vue.prototype, '$self', {
  get() { return this }
})

<Message v-for="msg in messages" :messageText="$self.msg">
  {{ msg }}
</Message>
Decade Moon
  • 32,968
  • 8
  • 81
  • 101
0

using $data to access parent component states, try this

<div v-for="(i,msg) in messages" :key="i">
  parentMsg: {{$data.msg}}
  childMsg: {{msg}}
</div>
user12865694
  • 1