作用域插槽slot-scope在vue中的用法

插槽slot分为:“匿名插槽”、“具名插槽”、“作用域插槽”;
“作用域插槽”是需要在插槽slot上绑定数据的。然后组件模板根据slot上绑定的数据进行操作。

或者这样弄:(将doc进行解构)

Vue.component('slot-tab',{
		data:function (){
			return {
				doc: {
					title:'i am a solt',
					contion: 'i want to use the slot'
				}
			}
		},
		template:`

noise popular people population public pub

`//v-bind:doc="doc"就是插槽绑定的数据。 }) var vm = new Vue({ el:'#app', data: {} })

总结:
1、要在模板中的slot标签上绑定数据v-bind:dd=“dd”。
2、要在使用组件时的template标签上定义作用域slot-scope=“aa”;
3、使用数据时要作用域.数据(aa.dd)
或者利用解构的语法:
2、要在用组件时的template标签上解构数据slot-scope="{dd}";(是一组大括号);
3、直接使用绑定的数据dd;

你可能感兴趣的:(vue.js,作用域插槽,slot-scope)