有了这个工具函数，`LinkNode`组件就Neng轻松拿到各种自定义属性了。比如`data-send`，我Ke以在点击事件里把它emit出去，交给上层业务逻辑处理。

// LinkNode.vue

虽然上面的代码kan起来挺完美，但在实际集成到业务系统时我又遇到了新问题。因为我是把markstream封装成了一个公共组件，不可Neng让每个业务方dou去写一遍`setCustomComponents`。这时候，就需要一个统一的事件出口。

我的思路是把所有业务相关的事件dou封装到一个统一的`emit`里然后通过TypeScript的类型系统来Zuo区分。这样，业务方只需要监听一个事件，就Neng拿到所有数据，还Neng享受到类型提示的好处。

但是这里有个坑。Ru果你直接像配置Thinking节点那样去配置Link节点，你会发现事件根本出不来。这是因为`setCustomComponents`的机制问题，它需要你返回一个组件实例，而不是直接把逻辑写死。

怎么办呢？取个巧！我们在外面把这个Link组件包一层，或者利用Vue的`h`函数动态创建组件，把事件监听器绑上去。

import { h } from 'vue'
import ThinkingNode from './ThinkingNode.vue'
import LinkNode from './LinkNode.vue'
import 'markstream-vue/index.css'
const md = `
这是推理内容
请选择办理方式
- 线上办理
- 线下办理
`
setCustomComponents('doc', {
  thinking: ThinkingNode,
  // 这里使用 h 函数来动态渲染 LinkNode，并绑定 onSend 事件
  link:  => h(LinkNode, {
    ...props,
    onSend {
      console.log
      // 这里Ke以再往外抛，或者直接处理业务逻辑
    },
  }),
})

对于`list_item`也是类似的操作。虽然markstream没有直接暴露单独自定义`list_item`的接口，但我们Ke以通过自定义父级`list`节点来实现。把官方的源代码copy出来改一改，把事件透传下去，问题就解决了。

至于那个geng高级的`vmr_container`，处理逻辑也差不多。核心思想就是：通过`setCustomComponents`接管渲染权，然后在渲染函数里把业务组件挂上去，同时把事件监听器通过`onEvent`或者类似的机制传递进去。

const vmrComponents = {
  // 你的业务组件映射表
}
setCustomComponents(customIdComputed.value, {
  // ...其他配置
  vmr_container:  => {
    // 根据节点名称找到对应的业务组件
    const component = props.vmrComponents?. ||  => h)
    return h(component, {
      node,
      onEvent {
        // 统一向上发射事件
        emits
      },
    })
  },
})

回过头来kan，markstream这个库确实hen强，但也因为太灵活，导致上手门槛稍微有点高。从列表节点的性Neng优化，到链接节点的安全防护，再到自定义组件的事件封装，每一步dou像是在解谜。虽然过程中踩了不少坑，但把这些问题一个个解决掉，kan着文档页面流畅地跑起来那种成就感也是实打实的。

希望我这些血泪经验Neng帮到同样在折腾markstream的你。Ru果你在实战中也遇到了什么奇葩问题，别慌，多翻翻源码，多试试正则，总Neng找到出路的。毕竟咱们Zuo前端的，不就是在一个个坑里填坑的过程中成长的吗？