vue-使用js创建组件--render函数
vue-cli--使用js创建组件--render函数template 怎么被写成一个页面的一般使用组件我们也可以使用JS创建一个组件template 怎么被写成一个页面的template 被 vue-template-compiler 插件编译成一个render函数render函数再被创建成一个VNode(虚拟dom)一般使用组件创建组件,一般的我们再components文件夹中创建一个需要的组
·
vue-cli--使用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
更多推荐
已为社区贡献8条内容
所有评论(0)