Question

我有一个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。我怎样才能做到这一点？我怎样才能传递这些数据？

Answer 1

传递它，因为您通常会将值从父级传递给子级;使用道具。

这是一个例子。

<强>的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>

<强> Test.vue

<template>
  <div>{{user}}
</template>

<script>
module.exports = {
  props:["user"]
}
</script>

这会将Vue中定义的用户传递给Test组件，结果输出为＆＃34;这是一个测试字符串＆＃34;。

Vue.js通过httpVueLoader传递数据

1 个答案: