一. 使用template属性创建组件模板
import Vue from 'vue'
const Item = Vue.component('Item', {
template: `<div>
<h2>子组件</h2>
<slot></slot>
</div>`
})
const app = new Vue({
el: '#app',
template: `<div ref="myDiv"> <item ref="item">
<p ref="p">this is a slot</p>
</item>
</div>`,
data: {
count: 0 },
components: {
Item
}
})
复制代码
二. 把父组件的template创建换成使用render方法创建
const app = new Vue({
el: '#app',
data: {
count: 0
},
render (createElement) {
return createElement(
'div', {
ref: 'myDiv',
// domProps: {
// innerHTML: '<span>注意:添加该属性会把后面的子节点覆盖</span>'
// },
attrs: {
id: 'test-id',
title: 'test-title'
}
},
[
createElement('item', {
ref: 'item'
},
[
createElement('p', {
ref: 'p'
}, 'this is a slot')
])
])
},
components: {
Item
}
})复制代码
1 . 如上面更改后的代码,render方法内传入createElement函数,接下来使用createElement函数来创建节点。
2. 函数方法格式 createElement('节点或组件名称', {节点属性}, [子节点])
3. 先创建一个div元素, 内部包含ref='myDiv'的属性, 使用数组存放其子节点
4. 数组内子节点是 item组件, 属性是 ref="item", 其子节点为p, 依次类推逐层创建子节点, 最后的文本节点使用字符串或变量即可,无需再用[]包含。
所有评论(0)