Vue.js：如何在方法中使用来自另一个组件的变量

Question

假设我在 Vue 组件中有一些数据（我们称之为 Data.vue），如下所示：

<script>
export default {
    data(){
        return{
            data1: {some data}
        }
    }
}
</script>

我想在方法的另一个页面（Main.vue）上使用该数据。

<script>
export default {
    methods: {
        someMethod: function(){
            console.log(this.data1)
        }
    }
}
</script>

我将如何 go 这样做？

我确实尝试将数据导入到“Main.vue”，如下所示：

import { data1 } from '@/components/Data'

我还需要采取哪些其他步骤？

Answer 1

您的 Q 太笼统了，因为它取决于（从孩子到父母？全局数据？只读数据？等等）。

一种基本方式是通过道具。 示例：从父到子传递数据（数组/对象/字符串等）

“你好世界的例子”

 Vue.config.devtools = false; Vue.config.productionTip = false; Vue.component('child', { // camelCase in JavaScript props: ['message_from_parent'], template: '<h3>{{ message_from_parent }}</h3>', created: function () { console.log(this.message_from_parent) } }) var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <child v-bind:message_from_parent="message"></child> </div>

或者相反（从孩子到父母）通过 $emit： https://v2.vuejs.org/v2/api/#vm-on

Answer 2

您可能有多个组件Data ，然后不清楚您要共享哪一个。

如果您只有一个组件，那么您可以只导出数据

<script>
const data1 = {some data}

export { data1 }

export default {
    data () {
        return {
           data1
        }
    }
}
</script>

然后您的导入应该可以工作。

import { data1 } from '@/components/Data'

但这有点 hacky，你应该使用 store live vuex