### Vue3 中 `render` 函数
属性传值
在 Vue3 中，`render` 函数仍然可以用来定义组件的结构并动态
传递
属性。通过 `createElement` 或其简写形式 `h`，可以在创建虚拟 DOM 节点时向子组件或 HTML 元素
传递
属性和事件。
以下是详细的说明以及示例：
#### 使用 `props` 和其他
属性传递数据
当使用 `render` 函数时，可以通过第二个参数的对象来设置
属性、绑定事件以及其他配置项。这个对象通常包含以下几个部分：
- **`class`/`style`**: 设置类名或内联样式。
- **`attrs`**: 用于
传递普通的 HTML
属性。
- **`on`**: 绑定事件监听器。
- **`props`**: 向子组件
传递特定的 `props` 数据。
以下是
一个完整的示例代码，展示了如何在 Vue3 的 `render` 函数中给
属性传值[^2]:
```javascript
// 引入 Vue3 并注册
一个子组件 Widget
import { createApp, h } from 'vue';
const Widget = {
props: ['content'], // 子组件声明接受的内容 prop
template: `<div>{{ content }}</div>` // 显示接收到的 prop
值
};
const App = {
render() {
return h(Widget, { // 使用 h 函数创建子组件实例
props: { //
传递 props 数据
content: "Hello from Parent Component!"
},
attrs: { // 可选：
传递额外的 HTML
属性
title: "This is a tooltip"
}
});
}
};
createApp(App).mount('#app');
```
在这个例子中：
- 我们导入了
一个名为 `Widget` 的子组件，并在其内部声明了
一个 `prop` 名为 `content`。
- 在父组件的 `render` 方法中，我们调用了 `h` 函数（相当于 Vue2 的 `createElement`），并通过第二个参数将 `props` 和 `attrs`
传递给了子组件[^3]。
#### 动态绑定事件
除了
传递静态
属性外，还可以通过 `on` 来绑定事件处理程序。例如，在点击按钮时触发回调函数：
```javascript
const ButtonComponent = {
props: ['label'],
template: '<button>{{ label }}</button>'
};
const EventExample = {
methods: {
handleClick(event) {
console.log('Button clicked!', event);
}
},
render() {
return h(ButtonComponent, {
props: {
label: "Click Me"
},
on: { // 绑定 click 事件
click: this.handleClick.bind(this)
}
});
}
};
```
这里演示了如何利用 `on` 参数绑定自定义事件处理器[^1]。
---
### 总结
Vue3 的 `render` 函数提供了灵活的方式来构建复杂的 UI 结构，并支持
多种方式
传递数据和行为逻辑。无论是简单的 HTML
属性还是更高级别的响应式 `props` 都能轻松实现。
---
扫一扫
821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
