vuejs2 - Vue.js Passing Data via httpVueLoader -
i have vue instance.
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') } }); and single file component 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> i don't want define new data.user in single file component , want use data.user of vue instance. how can that? how can pass data?
pass pass values parent child; using prop.
here example.
index.html
<body> <div id="app"> <test :user="user"></test> </div> <script> new vue({ el: '#app', data: { user: "this test string" }, components:{ test: httpvueloader("/test.vue") } }) </script> </body> test.vue
<template> <div>{{user}} </template> <script> module.exports = { props:["user"] } </script> this pass user defined in vue test component , resulting output "this test string".
Comments
Post a Comment