Question

在http://quasar-framework.org/中，我有几个共享相同布局的屏幕，例如产品和客户列表。

但是，我不知道如何将数据从页面传递到它们的布局。例如，布局有一个标题，我希望根据显示的页面进行更改：

//Routes:
  {
    path: '/orders',
    component: () => import('layouts/list'),
    children: [
      { name: 'pickCustomer', path: '/customer', component: () => import('pages/CustomersList') },
      { name: 'pickProducts', path: '/products/:customer_id', component: () => import('pages/AddProductsList') },
      { name: 'addProduct', path: '/addproduct/:order_id/:product_id', component: () => import('pages/AddProductsList') },
      { name: 'confirmOrder', path: '/confirm/:order_id', component: () => import('pages/AddProductsList') }
    ]
  }

//list.vue
    <template>
      <q-layout>
        <q-layout-header>
            <q-toolbar>
            <q-btn
                flat
                round
                dense
                icon="chevron_left"
                @click="leftDrawer = !leftDrawer"
            />
            <q-toolbar-title>
                {{title}}
            </q-toolbar-title>
            <q-btn flat round dense icon="save" label="Add" />
            </q-toolbar>

            <q-toolbar>
            <q-toolbar-title>
                <q-search v-model="search" @input="change" inverted color="none" />
            </q-toolbar-title>
            </q-toolbar>
        </q-layout-header>          </q-layout>
    </template>

    <script>    
    export default {
      // name: 'LayoutName',
    }
    </script>

//Customers.vue
<template>
</template>

<script>
import CustomersRows from '../statics/json/customers.json'

export default {
  data () {
    return {
      title: 'Customers', <--HOW TO PASS THIS?
    }
  }
}
</script>

Answer 1

您需要在路线中使用元。在你的布局中，使用这个：

<q-toolbar-title
    v-if="$route.meta.title"
    class="text-center"
>
    {{ $route.meta.title }}
</q-toolbar-title>
<q-toolbar-title
    v-else 
    class="text-center"
>
    Any default title you may have
</q-toolbar-title>

或者简单地说：

<q-toolbar-title class="text-center">
    {{ $route.meta.title || 'Any default title you may have' }}
</q-toolbar-title>

这可以在您的路线中设置，如下所示：

[
    { path: '/', meta: { title: 'Dashboard' } },
    { path: '/route-1', meta: { title: 'Route 1' } },
]

Answer 2

mamcx，这个答案很晚了。但是，如果有人发现它有用的话.....

现在，我正在使用 Quasar CLI ........ v0.17.20 Quasar Framework .. v0.17.17 在Quasar中，如果您要将信息从一页传递到其父版式，我们可以像在VueJS中一样使用总线，但是首先我们必须注册它。因此，在树形结构中，在插件文件夹（该文件夹位于src文件夹中）上创建.js文件（例如myplugin.js）。在此页面中写...。

 export default ({ app, router, Vue }) => {
  // something to do
  var bus = new Vue()
  Object.defineProperties(Vue.prototype, {$bus: {get: function () { return bus }}})
}

此后，我们必须将此myplugin.js注册到我们的...

quasar.conf.js

在quasar.conf.js中，

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
      'axios',
      'myplugin', // WE REGISTER OUR myplugin.js
      'comm'
    ],
    css: [
      'app.styl'
    ],
...............
.............
....

现在假设我们要将您的“客户”标题从“客户”页面传递到其父版式

我们写在“客户”页面的创建事件上。

created () {
  this.$bus.$emit('Title', 'Customers')
}

在主布局上，我写

methods: {
    getTitle: function (Title) {
      this.Header = Title  // Header is my variable
      console.log(this.Header)
    }
  },
 created () {
    this.$bus.$on('Title', this.getTitle)
  }

我们完成了！！！！

Answer 3

结帐portal-vue是一个非常强大的解决方案，可让您在其中放置标题（以及更多！）

在类星体中如何从页面传递数据到布局

3 个答案: