vue-cli--使用js创建组件--render函数
template 怎么被写成一个页面的
-
template 被 vue-template-compiler 插件编译成一个render函数
-
render函数再被创建成一个VNode（虚拟dom）
一般使用组件
- 创建组件，一般的我们再components文件夹中创建一个需要的组件
- 导入：
import 组件的名字 from '地址’
// 导入一个其他的组件
import ComB from '../components/ComB.vue'
我们也可以使用JS创建一个组件
// 目标：创建一个组件，增加传入参数propslevel 传入1返回h1,2--h2等
// js创建组件
var child = {
// 组件用来接收父组件的参数的中间量，level
// 接收父组件传递的数据list,用来遍历
props : ['level',"list"],
// 渲染组件的函数 render
render(createElement) {
// createElement 创建dom的一个方法
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'
// 打印导入的组件，以及我们用js创建的组件，发现两者基本一致
// 为什么会这样？是什么编译的
// 答案是webpack
// 一个 .vue文件最终会编译成js render函数，是有vue-
console.log(ComB);
console.log(child);
// 父组件的
export default {
name: 'Home',
data() {return {
list : ["vue","react"]
}},
methods : {
},
// 注册js写的组件
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
