您的位置：首页 > Web前端 > Vue.js

vue render data scopedSlots属性详解

2019-03-05 19:11 573 查看

上代码：

<!DOCTYPE html>
<html>
<head>
<title>采购</title>
<script src="../static/js/vue-2.5.22.js"></script>
</head>
<body>
<div id="app">
<top-component :head="head" :message="msg">
<h3 slot-scope="props">{{props.text}}---{{props.title}}</h3>
</top-component>
<form>
0:<input type="range" v-model="count" max="999999" min="0" step="100000">{{order.max}}
</form>
<p>{{billMsg}}</p>

</div>
<script>

Vue.component('top-component',{

mounted:function(){
console.log(this.message);
},
methods:{
clickHandler:function(){
console.log('this is on watcher')
}
},
render:function(createElement){
return createElement('h1',
{
attrs:{id:1},
on:{
click:this.clickHandler
},
// scopeSlots:{
// 	d
// }

},
[createElement('child-component',{scopedSlots:{default:function(props){
return createElement('span',props.text)
}}},[this.$scopedSlots.default({
text:'this is scope slot',
title:'hehe'

})])])
},
props:['message','head']

})
Vue.component('child-component',{
props:['titles'],
render:function(createElement){
return createElement('i',[this.$scopedSlots.default({
text:'this is real scopedSlots'
})])
}
})
var vm = new Vue({
el:'#app',
data:{
msg:'this is project child',
head:[
{title:'product list'},
{title:'query center'},
{title:'order system'}
],
order:{
max:999999
},
count:0,
billMsg:''
},
watch:{
count:function(nval,oval){
this.billMsg = '原来的采购数量：'+oval+'新的采购数量：'+nval;
}
}
})
</script>
</body>
</html>

重点看这里：

还有一篇关于$scopedSlots基本用法的博客，建议大家可以先看看这一篇：
https://blog.csdn.net/qq_34345149/article/details/88118203

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航