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>

我正在尝试将数据msg（＆＃39; Welcome dear＆＃39;）从父级传递给孩子。有没有办法指定访问welcome-msg prop的父msg？

注意：我知道我可以通过更改v-for like来使其工作。我刚刚开始学习Vue.js并且很想知道是否有办法通过某种范围来访问父数据

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

更新：这不是变量阴影的重复，因为变量阴影有一种方法可以使用window.functionName调用全局函数。这个问题特定于Vue.js＆amp;因此我不相信这是重复的。

Answer 1

很想知道是否有办法通过某种范围访问来访问父数据

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

你可以做这样的事情，但这不是一个比选择不同名称更好的解决方案：

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

Answer 2

使用$ data访问父组件状态，请尝试

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

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

2 个答案: