vue-cli--使用js创建组件--render函数
template 怎么被写成一个页面的
template
被 vue-template-compiler
插件编译成一个render函数
render
函数再被创建成一个VNode(虚拟dom)
一般使用组件
- 创建组件,一般的我们再components文件夹中创建一个需要的组件
- 导入:
import 组件的名字 from '地址’
import ComB from '../components/ComB.vue'
我们也可以使用JS创建一个组件
var child = {
props : ['level',"list"],
render(createElement) {
return createElement(
"h" + this.level,
{
class : {red : true,weight : true},
style : {fontSzie : "60px"},
attrs : {title : "我来自中国"},
domProps : {
innerHTML : `<i>你好</i>`
},
on : {click : this.say}
},
["聂荣",this.$slots.default],
this.list.map(item => {
return createElement("p",item);
})
);
},
methods : {
say() {
alert("你好啊,小朋友")
}
}
}
import ComB from '../components/ComB.vue'
console.log(ComB);
console.log(child);
export default {
name: 'Home',
data() {return {
list : ["vue","react"]
}},
methods : {
},
components : {
child
}
}
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<child :level="1"></child>
<child :level="2"></child>
<child :level="3"></child>
<child :level="4" :list= "list" ><slot>插槽内容</slot></child>
</div>
</template>s