vue render data scopedSlots属性详解

上代码：<!DOCTYPE html><html><head><title>采购</title><script src="../static/js/vue-2.5.22.js"></script&a

古月的博客

4467人浏览 · 2019-03-05 19:11:46

古月的博客 · 2019-03-05 19:11:46 发布

上代码：

<!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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^