vue-使用js创建组件--render函数

template 怎么被写成一个页面的

• template 被 vue-template-compiler 插件编译成一个render函数
• render函数再被创建成一个VNode（虚拟dom）

一般使用组件

• 创建组件，一般的我们再components文件夹中创建一个需要的组件
• 导入：import 组件的名字 from '地址’

// 导入一个其他的组件
import ComB from '../components/ComB.vue'

我们也可以使用JS创建一个组件

• 使用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