我有一个 Vue 实例。
var myApp = new Vue({
el: '#my-App',
data: {
user: sessionStorage.getItem('user')
},
components: {
'header-component': httpVueLoader('./components/header-component.vue'),
'footer-component': httpVueLoader('./components/footer-component.vue')
}
});
和单个文件组件header-component
<template>
<li v-if="user !== ''" class="nav-item">
<a class="nav-link" v-on:click="openProfilePage" href="#">{{user}}</a>
</li>
</template>
<script>
module.exports = {
data: function () {
return {}
},
props: ['user'],
methods:
{
openProfilePage: function () {
if (userName !== '') {
myApp.page = 'profile';
sessionStorage.setItem('page', 'profile');
page = 'profile';
}
else {
myApp.page = 'login';
sessionStorage.setItem('page', 'login');
page = 'login';
}
}
}
}
</script>
我不想在我的单文件组件中定义一个新的 data.user，我想使用 vue 实例的 data.user。我怎样才能做到这一点？我如何传递这些数据？
最佳答案
像通常将值从父级传递给子级一样传递它；使用 Prop 。
这是一个例子。
index.html
<body>
<div id="app">
<test :user="user"></test>
</div>
<script>
new Vue({
el: '#app',
data: {
user: "This is a test string"
},
components:{
test: httpVueLoader("/Test.vue")
}
})
</script>
</body>
测试.vue
<template>
<div>{{user}}
</template>
<script>
module.exports = {
props:["user"]
}
</script>
这会将 Vue 中定义的用户传递给测试组件，结果输出将是“这是一个测试字符串”。
关于Vue.js 通过 httpVueLoader 传递数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46179935/