渲染函数的使用
1.
2.
3.
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
//anchored-heading：子组件 传递一个值level给子组件
<anchored-heading :level="level">渲染函数的使用---{{level}}</anchored-heading>
</div>
<script type="text/javascript">
//注册的子组件
Vue.component('anchored-heading', {
render: function(createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
// 子组件接收一个值level
level: {
type: Number,
required: true
}
}
})
var vm = new Vue({
el: '#app',
data: {
age: '12岁',
level:1
},
</script>
</body>
</html>
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
