四川住房和城乡建设九大员网站,简单的网页设计源代码,东莞网络技术有限公司,app开发网站开发Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中#xff0c;你真的需要 JavaScript 的完全编程的能力。这时你可以用render渲染函数#xff0c;它比模板更接近编译器 。 在Vue2中#xff0c;render函数是一个可选的、用于生成虚拟DOM的特殊函数。它是Vu… Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中你真的需要 JavaScript 的完全编程的能力。这时你可以用render渲染函数它比模板更接近编译器 。 在Vue2中render函数是一个可选的、用于生成虚拟DOM的特殊函数。它是Vue实例的一个选项允许开发者使用JavaScript编写模板而不是使用HTML模板。render函数接收一个h函数h函数是createElement的别名。很多人喜欢用createElement形参不过是个名称而已作为参数该函数用于创建虚拟节点VNode。
下面是一个render函数简单示例
render(h) {return h(h1, Hello, Vue!)
}上面是一个简单写法完整来说h函数接受三个参数 第一个参数可以是字符串表示HTML标签名或组件名、组件对象或函数。如果是自定义组件需要确保组件已经在当前实例或全局注册。 第二个参数属性对象包含传递给子组件的props、attrs、class、style等。 第三个参数子节点可以是字符串、数组或对象。 当第一个参数为HTML标签名的时候常用配置如下
const vnode h(div, {id: my-id, // 设置id属性class: my-class, // 设置class属性style: { color: red }, // 设置内联样式onClick: function() { // 设置点击事件处理程序console.log(Clicked!);}
}, [h(p, { class: text }, Hello, World!) // 子节点
]);
当第一个参数为组件名称时配置如下
const vnode h(my-component, {// 组件的类名 使用同 :class 语法class: {aaa: true},// 组件的内联样式 使用同 :style 语法style: {color: blue},// 一个对象包含组件所需的属性。这些属性将被传递给组件并在组件内部作为props进行访问。props: {msg: Hello, World!,},//一个对象包含组件的非prop属性例如class、style等。这些属性将被添加到组件的根元素上。attrs: {class: my-class,style: { color: red }},// 一个对象包含组件的事件处理程序。on: {click() {console.log(Clicked!!!)}},// 一个对象包含组件的原生事件处理程序。与on类似但用于监听原生DOM事件。nativeOn: {click() {console.log(Clicked!!!)}},// 一个对象包含组件的DOM属性。domProps: {innerHTML: Hello, World!},// 一个对象包含组件的作用域插槽。scopedSlots: {default: () h(h1, null, 我是标题1)},// 一个字符串或数组表示组件的插槽内容slot: slot container,// 一个字符串或数字表示组件的唯一标识符。key: unique-key,// 一个字符串表示组件的引用标识符。ref: myComp,// 一个函数返回组件实例的数据对象。data() {return {name: wft}},// 一个对象包含组件的指令。directives: [{ name: my-directive, value: Hello, World! }],// 一个对象包含组件的生命周期钩子。hooks: {created() {console.log(created!!)},mounted() {console.log(mounted!!)}},// 一个布尔值表示是否将父组件的属性继承到子组件。inheritAttrs: true,// 一个字符串表示组件的真实标签名。这在渲染组件时非常有用因为它允许Vue跳过验证过程。is: my-component
}, {default: () h(p, null, 我是默认插槽)
});
我们在给子组件传递数据的时候也就是父传子一般写在props中 其实也可以写在attrs中如果写在attrs中我们也可以在子组件中props中接受attrs中的变量如果props中没写的变量都会在attrs中我们在组件中通过this.$attrs中可以拿到。
下面是一个示例
先使用render函数封装一个组件注意写了render函数就不要写template了不然render函数不起作用
/components/BasicRender.vue
script
import { deepClone } from /utils
export default {props: {tag: {type: String,default: div},option: {type: Object,default: () null},children: {type: [String, Array, Object],default: }},render(h) {const opt deepClone(this.option)console.log(opt, opt--.)return h(this.tag, opt, this.children)}
}
/script
上面是一个vue组件也可以写一个.js文件写render函数那么它也可以跟组件一样使用注册使用
/components/Render.js
import { deepClone } from /utils
export default {props: {tag: {type: String,default: div},option: {type: Object,default: () null},children: {type: [String, Array, Object],default: }},render(h) {const opt deepClone(this.option)console.log(opt, opt 对象 obj --.)return h(this.tag, opt, this.children)}
}
然后是main.vue引入封装的render组件 templatediv classwft-mainBasicRender:tagtag:optionoption:childrenchildren//div
/template
script
// import BasicRender from /components/Render
import BasicRender from /components/BasicRender
export default {data() {return {// tag: div,// option: {// id: WFT,// class: wft,// style: {// border: 1px solid red,// width: 350px,// height: 350px,// display: flex,// justifyContent: center,// alignItems: center// },// onClick() {// console.log(onClicked!!!)// },// attrs: {// msg: 456 msg// }// },// children: 呵呵呵tag: G1,option: {class: {G1-class: true},style: {display: flex,flexDirection: column,justifyContent: center,alignItems: center},props: {title: wwwfffttt,age: 18,info: {name: wft}},attrs: {customData: {id: 0000,name: JAY}},scopedSlots: {default: () (BasicRender tag{h1} children{66611} /),content: () 我是content}},children: {default: 666,content: 我是content插槽内容}}},components: { BasicRender }
}
/script
style scoped
.wft-main {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center
}
/style这是加载组件G1注意我们加载的组件一定是引入、注册之后的我这里全局注册了
然后是G1组件
templatediv classwft-w-h-100slot/sloth1我是G1 全局组件/h1h3{{ title }}--{{ age }}--{{ info }}/h3slot namecontent/slot/div
/template
script
export default {data() {return {}},props: {customData: {type: Object,default: () ({})},title: {type: String,default: },age: {type: Number,default: 0},info: {type: Object,default: () ({})}}
}
/script
style scoped
.wft-w-h-100 {width: 100%;height: 100%;
}
/style下面是运行的效果图
