# 如何在外部组件中引入 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)