如何在 Vuejs 中将全局变量从父级传递到子级?

Question

我有一个名为Profile.vue的页面，其结构是这样的，

<style>
</style>
<template>
<component-1></component-1>
<component-2></component-3>
<component-3></component-3>
</template>
<script>
import component1 from '...../..'
import component2 from '...../..'
import component3 from '...../..'
export default {
name: 'profile',
data(){
return{
pagename: 'Profile',
mydata: 'This is my data'
}
}
}
</script>

如何使数据在 mydata 中可用，到我正在导入的所有组件，即，如何将可用于所有组件的数据传递？

Answer 1

你可以使用道具。

<component-1 v-bind:message="mydata"></component-1>

然后在您的子组件中(直接从文档中(：

Vue.component('component-1', {
// declare the props
props: ['message'],
// just like data, the prop can be used inside templates
// and is also made available in the vm as this.message
template: '<span>{{ message }}</span>'
})

Answer 2

与其使用props(这可能意味着你必须经常传递这些 props(，不如使用 $parent(或$root(访问变量

Vue.component('component-1', {
computed: {
message: function(){
// this is how to access the variable inside the component code
return this.$parent.message;
},
},
// and because of using computed, access it inside the template
template: '<span>{{ message }}</span>'
})

Answer 3

你只是导入了一些未继承的组件，所以你不能像那样共享数据。 将组件添加到父组件的组件字段中，如下所示： https://v2.vuejs.org/v2/guide/components.html#Local-Registration 然后在子组件中，您可以使用它.$parent。而这个.$parent.mydata在你的例子中