vue3.0中使用render渲染函数渲染组件或标签
vue3.0中使用render渲染函数
·
使用 render 渲染函数是使用了 js 来渲染组件或标签
而我们平时使用时是直接在 template 标签中直接书写
这两种方法都可以实现组件或标签的创建
下面是使用 render 渲染的方法
import { h } from "vue";
export default {
render: () => {
return h(
"p", // 第一个参数可以写标签名或者组件名
// 第二个参数可以写属性、样式、事件等
{
// 添加属性类名
id: "idName",
class: "className",
// 添加样式
style: {
height: "100%",
border: "1px solid green",
margin: "100px"
},
// 添加事件
onClick: () => {
console.log("点击事件执行");
},
onMouseover: () => {
console.log("鼠标进入执行");
},
oncontextmenu: () => {
console.log("右键点击事件执行");
},
},
"这里是第三个参数可以写内容"
);
}
}
这里是vue单文件写成的,当然也可以使用纯 js 进行书写,下面是渲染过后的效果
更多推荐
已为社区贡献1条内容
所有评论(0)