vue.js - Vue - 将 v-for 中具有相同键名的父数据传递给子组件

Question

父组件:

                <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>

子组件:

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

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

我正在尝试将数据消息(“欢迎亲爱的”)从 parent 传递给 child 。有没有办法指定访问 welcome-msg 属性的父消息？

注意:我知道我可以通过更改 v-for 来使它工作。我刚开始学习 Vue.js，很想知道是否有办法通过某种范围界定来访问 parent 的数据

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

更新:这不是变量阴影的副本，因为对于变量阴影，有一种方法可以使用 window.functionName 调用全局函数。这个问题是 Vue.js 特有的，因此我不认为这是重复的。

Answer 1

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

这是不可能的。您需要选择不同的变量名称来区分它们。

您可以做这样的事情，但这并不是比选择不同名称更好的解决方案:

// 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>