# 如何在外部组件中引入 vue 组件

如下所示,和使用 react 组件方式一样使用 vue 组件 message 参数非必传

x-cli 版本需要大于等于 0.0.125
index.js 中需要添加 import React from 'react' 语句

import React from "react"
// 自定义Vue组件
import MyVueComponent from "./vue/Demo.vue"
// 使用第三方npm包
import { Button } from "vant"
import "vant/lib/index.css"
// 注册第三方组件
Vue.use(Button)

export default {
  ...
  /**
   * 渲染事件
   *
   * @param  {Object} ctx 上下文
   * @return {string}     需要渲染出来的html字符串
   */
  onRender: function(ctx) {
    // eslint-disable-line no-unused-vars
    return (
      <div className="business">
        测试 这是一个vue组件
        <MyVueComponent
          message="Hello from React!"
          on={
            // 传递事件
            {
              onClick: this.handleClick.bind(ctx),
              onSubmit: this.handleSubject.bind(ctx)
            }
          }
        />
      </div>
    )
  }
}

在vue组件中触发父组件传入的事件

 this.$emit('onClick', data)
 this.$emit('onSubmit', data)