props:['cmpData'],
render:function(createElement,context){
return createElement('el-input',{
props:{
type:this.cmpData
}
});
},
mounted() {
console.log(this) //这个组件为正常组件
},
}
var comp2={
props:['cmpData'],
render:function(createElement,context){
return createElement('el-button',{
props:{
type:this.cmpData
}
});
},
mounted() {
console.log(this) //正常组件
},
}
三、在父组件中使用
<template>
<div>
<el-input v-model="changer" placeholder="子组件"></el-input>
<my-cmp :changer="changer"></my-cmp>
</div>
</template>
<script>四、理解渲染函数的参数
接下来说一下createElement 接受的参数：
第一个参数：可以是 {String | Object | Function}
不管是那种类型，最终返回到都是需要渲染的普通DOM标签，
第二个参数：是一个对象，这个参数是可选的，定义了需要渲染组件的参数，相对于普通HTML标签的属性是一样的。
还可以自定义指令的，Vue特有的东西，只是抽象一些，没有直接用Vue.directive()用起来直观。
第三个参数：子级虚拟节点，如果你这个节点只是单节点，没有嵌套节点，这个参数可以忽略。如果有的你就要使用一个数据数组的值位cerateElement()返回的虚拟节点。套路都是一样的。
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象，或者
// resolve 了上述任何一种的一个 async 函数。必填项。
'div',
// {Object}
// 一个与模板中属性对应的数据对象。可选。
{
// 与 `v-bind:class` 的 API 相同，
// 接受一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 与 `v-bind:style` 的 API 相同，
// 接受一个字符串、对象，或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 prop
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器在 `on` 属性内，
// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
// 需要在处理函数中手动检查 keyCode。
on: {
click: this.clickHandler
},
// 仅用于组件，用于监听原生事件，而不是组件内部使用
// `vm.$emit` 触发的事件。
