如何在 Vue.js 中创建自定义链接组件？

Posted 2023-02-23

【中文标题】如何在 Vue.js 中创建自定义链接组件？

【英文标题】：How to create a custom link component in Vue.js?

【发布时间】：2017-09-21 17:04:28

【问题描述】：

这看起来像是普通的主/细节用例，但 Vue 文档中的示例缺少这方面的示例。我有一个邮件文件夹页面（路由/:mailbox_id），它按日期、主题等显示电子邮件表，我想要一个嵌套路由（/:message_id），当用户单击一行时显示电子邮件的文本。

我能够在 Ember (recreating this) 中执行此操作，因为 Ember 使用 javascript onClick 函数来处理路由并允许您设置要呈现的 html 元素，然后您只需将任何对象传递给子路由。

但我是 Vue.js 的新手，我一直在阅读文档，但不知道如何完成同样的事情。我不知道如何创建自定义链接组件，或者如何使用内置的 Vue <router-link>component（因为我需要它是 <tr> 而不是 <a>）都去子路由，并将消息的内容传递给它以便显示。

如果有帮助，这里有一些代码：

路由器

export default new Router(
  routes: [
    
      path: '/:id',
      name: 'mailbox',
      component: Mailbox,
      props: true,
      children: [
        
          path: 'mail/:id',
          name: 'mail',
          component: Mail,
          props: true
        
      ]
    
  ]
)

组件：Mailbox.vue

<template>
  <div>
    <table>
      <tr>
        <th>Date</th>
        <th>Subject</th>
        <th>From</th>
        <th>To</th>
      </tr>
      <Mail-List-Item v-for="message in messages" :key="message.id" v-bind:message="message"/>
    </table>
    <router-view></router-view>
  </div>
</template>

<script>
  import MailListItem from './Mail-List-Item'

  export default 
    components:  'Mail-List-Item': MailListItem ,
    name: 'Mailbox',
    props: ['messages']
  
</script>

组件：Mail.vue

<template>
  <div class="mail">
    <dl>
      <dt>From</dt>
      <dd>mail.from</dd>
      <dt>To</dt>
      <dd>mail.to</dd>
      <dt>Date</dt>
      <dd>messageDate</dd>
    </dl>
    <h4>mail.subject</h4>
    <p>mail.body</p>
  </div>
</template>

<script>
export default 
  props: ['message', 'messageDate']

</script>

组件：Mail-List-Item.vue

<template>
    <V-Row-Link href="mail" mailid="message.id" message="message">
      <td>messageDate</td>
      <td>message.subject</td>
      <td>message.from</td>
      <td>message.to</td>
    </V-Row-Link>
</template>

<script>
  var moment = require('moment')
  import VRowLink from './V-Row-Link'

  export default 
    name: 'Mail-List-Item',
    props: ['message'],
    components:  VRowLink ,
    data: function () 
      return messageDate: moment(this.message.date).format('MMM Do')
    
  
</script>

组件：V-Row-Link.vue（其中大部分复制自 this repo）

<template lang="html">
  <tr
    v-bind:href="href"
    v-on:click="go"
    >
      <slot></slot>
  </tr>
</template>

<script>
import routes from '../Router'

export default 
  props: ['href', 'mailid', 'message'],
  methods: 
    go (event) 
      this.$root.currentRoute = this.href
      window.history.pushState(
        null,
        routes[this.href],
        this.href
      )
    
  

</script>

【参考方案1】：

路由器链接采用tag attribute，您可以使用它来将其转换为您喜欢的任何元素。一个例子是......

<router-link tag="tr" :to="'/messages/' + MAIL_ID"> MAIL_TITLE </router-link>

【讨论】：

嗯，这似乎完全合理。我一定在文档中错过了。