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

Posted 2023-02-16

【中文标题】使用 vue 和 vue router 将数据传递给组件并从父级访问数据

【英文标题】：Passing data to components and accessing data from parent using vue and vue router

【发布时间】：2021-12-31 10:03:50

【问题描述】：

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”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

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

【问题讨论】：

您需要显示section component 脚本。您是否在 props 部分中公开 showForm 属性？

是的，没有其他组件脚本，一切都在那里定义

【参考方案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 
]

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

【讨论】：

我试过了，这应该不是问题，因为它被呈现为“未定义，未定义”。

我会导致模板没有分配给它的选项对象，从而导致错误。

在正在使用的脚本中，实际上是template: '#test'

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

现在更糟的是两个组件都呈现“未定义，未定义”