了解过vue渲染函数了吗？来做些题检验下掌握程度吧。
题一
以下函数注册的子组件在父组件如何使用？生成的HTML是什么样的？
Vue.component('anchored-heading', {
render: function (createElement) {
var headingId = 'heading-id'
return createElement(
'h' + this.level,
[
createElement('a', {
attrs: {
name: headingId,
href: '#' + headingId
}
}, this.$slots.default)
]
)
},
props: {
level: {
type: Number,
required: true
}
}
})
题二
以下函数注册的子组件在父组件如何使用？该子组件长什么样？
Vue.component('my-component-exam2', {
render: function (createElement) {
if (this.items.length) {
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
},
props: ['items']
})
题三
以下函数注册的子组件在父组件如何使用？该子组件长什么样？
Vue.component('my-component-exam3', {
props: ['value'],
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.$emit('input', event.target.value)
}
}
})
}
})
题四
以下函数注册的子组件长什么样？
Vue.component('my-component-exam4', {
methods: {
foo() {
alert('bar')
}
},
render: function (createElement) {
var self = this
return createElement('input', {
on: {
keyup: function (event) {
// 如果触发事件的元素不是事件绑定的元素
// 则返回
if (event.target !== event.currentTarget) return
// 如果按下去的不是 enter 键或者
// 没有同时按下 shift 键
// 则返回
if (!event.shiftKey || event.key !== 'Enter') return
// 阻止 事件冒泡
event.stopPropagation()
// 阻止该元素默认的 keyup 事件
event.preventDefault()
// custom handle method
self.foo()
}
}
})
}
})
题五
以下函数注册的子组件在父组件如何使用？该子组件长什么样？生成的HTML长什么样？
Vue.component('my-component-exam5', {
render: function (createElement) {
return createElement('div', this.$slots.default)
// 另一种产生相同效果的写法
// return createElement('div', this.$scopedSlots.default())
}
})
题六
以下函数注册的子组件在父组件如何使用？该子组件长什么样？生成的HTML长什么样？
Vue.component('my-component-exam6', {
data () {
return {
foo: 'bar'
}
},
render: function (createElement) {
return createElement('div', [
this.$scopedSlots.default({
text: this.foo
})
])
}
})
附加题一
以下函数注册的子组件在父组件如何使用？生成的HTML长什么样？
Vue.component('my-component-exam7-1', {
data () {
return {
foo: 'bar'
}
},
template: `
<p><slot :text="foo"></slot></p>
`
});
Vue.component('my-component-exam7', {
render: function (createElement) {
return createElement('div', [
createElement('my-component-exam7-1', {
scopedSlots: {
default: function (props) {
return createElement('span', props.text)
}
}
})
])
}
})
题一答案
在父组件中使用方法：
<anchored-heading :level="3">
foobar
</anchored-heading>
生成的HTML：
<h3>
<a name="heading-id" href="#heading-id">
foobar
</a>
</h3>
题二答案
在父组件中使用方法：
<my-component-exam2 :items="[{name: 'item1'}, {name: 'item2'}]"></my-component-exam2>
子组件：
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
题三答案
首先我们要知道，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突。具体查看vue文档。
在父组件中使用方法：
<my-component-exam3 v-model="foo"></my-component-exam3>
子组件：
<input v-model="foo"/>
题四答案
子组件：
<template>
<input type="text" @keyup.self.shift.enter.stop.prevent="foo">
</template>
<script>
export default {
methods: {
foo () {
alert('bar');
}
}
}
</script>
题五答案
在父组件中使用方法：
<my-component-exam5>
<p>p content</p>
</my-component-exam5>
子组件：
<div><slot></slot></div>
生成的HTML：
<div><p>p content</p></div>
题六答案
提示：此题涉及到作用域插槽相关知识
在父组件中使用方法：
<my-component-exam6>
text is from child component: {{ text }}
</my-component-exam6>
子组件：
<template>
<div><slot :text="foo"></slot></div>
</template>
<script>
export default {
data () {
return {
foo: 'bar'
}
}
}
</script>
生成的HTML：
<div>text is from child component: bar</div>
附加题一答案
在父组件中使用方法：
<my-component-exam7></my-component-exam7>
生成的HTML：
<div><p><span>bar</span></p></div>
