Question

我正努力将道具传递给我的孩子部分，并仔细阅读许多示例，但我的位置有些安静。似乎这不应该那么复杂，对吧？理想情况下，当我将组件放在html页面上时，我希望能够将url作为属性传递。例 <landingpage myUrl="http://localhost"><landingpage>，但是当我在浏览器中使用Vue开发工具进行检查时，它始终是未定义的。我已经看到使用JQuery选择元素然后获取属性的黑客，但是我想在纯Vue中做到这一点。在下面的代码中，“ title”的任何变体都没有传递给我的组件。

在我的index.html页面中，我有这个

     <body>
    <p>Hello world, this is some text. Howdy.</p>
    <div id="NewWidget">
      <div id="app" data-title="mario" :data-title="luigi" :title="princess">
        <landingpage title="hello!" :title="spaghetti" v-bind:title="Nervos"></landingpage>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>

在我的App.vue中，

<template>
    <div id="app">
      <router-view></router-view>
    </div>
</template>

在我的着陆页上，我有这个

export default {
  name: 'landingpage',
  data () {
    return {
      categories: [],
    }
  },
  props: {
    title: {
      type: String
    }
  },
...

我的路由器index.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'LandingPage',
      component: LandingPage,
      props: true
    },
...

在我的LandingPage组件中，this.title始终为null / undefined。我正在使用Vue 2.5.2 / Vue Router 3.0.1 我唯一能想到的是App.vue中的VueRouter用法正在燃烧道具吗？

Vue道具在组件上未定义

0 个答案: