上代码：
<!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
2588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
