使用 vue 和 vue router 将数据传递给组件并从父级访问数据

Question

vue 2.6 和 vue router 3 有这个问题。 我已经像这样设置了路由器和 vue 实例：

const Settings = {
    props: ['showForm'],
    data: function () {
        return {
            // some data
        }
    },
   template: '#Settings'
}
const Norm = {
    props: ['showForm'],
    data: function () {
        return {
            //some data
        }
   },
  template: '#test'
}
const routes =[
    {path: '/',component:  Norm},
    {path:'/settings', component: Settings}
]
const router = new VueRouter({
    routes 
})
const app = new Vue({
   el: '#app',
   data: function () {
       return {
          //some data
           isConfigured: false,
        },
    },
   created: function (){
      //some codes called 
   },
   components: {
    'Settings': Settings,
    'Norm': Norm  
},
router: router
})

index.html 文件看起来像这样：

<div id='app'>
  <div class="nav-bar">
     <ul>
        <li><router-link to="/">Home</router-link ></li>
         <li><router-link to="/Settings ">Settings</router-link></li>
    </ul>
  </div>
  <router-view></router-view>
  <script type="text/x-template" id="settings">
    <section :showForm="isConfigured">
       {{ showForm +',' +isConfigured}}
     </section>
  <script type="text/x-template" id="test">
    <section :showForm="isConfigured">
       {{showForm +',' +isConfigured}}
    </section>
  </script>
</div>
<script src="vue-router.js">
<script src="vue.js"></script>
<script src="app.js"></script>

似乎数据没有传递给 showForm 道具，因为它呈现为：

Undefined, false

而且似乎 Norm 道具没有接收到数据，也无法访问 vue 实例中的数据，因为它呈现：

Undefined, Undefined

。

Vue 响应以下错误

[Vue 警告]：属性或方法“showForm”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

[Vue 警告]：属性或方法“isConfigured”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

我相信上面的第二个错误是针对规范组件的。虽然两个组件的第一个错误记录了两次。请问我做错了什么。

Answer 1

尝试将您的 x 模板移到应用程序模板之外。

另外，section 元素没有showForm 属性。您需要使用路由器将道具发送到组件中。您必须为您的 isConfigured 属性使用一个共同的事实来源，以便在应用程序组件和路由器组件中使用它。

所以对于showForm 属性：

<script type="text/x-template" id="test">
  <section v-show="showForm">
    I am configured
  </section>
</script>

你可以像这样传递道具：

const routes =[
    {path: '/',component:  Norm, props: {showForm: isConfigured},
    {path:'/settings', component: Settings, props: {showForm: isConfigured} }
]

最后，您不需要将路由声明为应用的子组件。