<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script src="vue.js"></script>
</head>
<body>
<div>
<h1>--作用域插槽--</h1>
<div id="example5">
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
<!--独占默认插槽的缩写语法-->
</br>
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>
<!--后备内容-->
<current-user></current-user>
</div>
<script>
Vue.component('current-user', {
data: function () {
return {
user: {
firstName: 'Arya',
lastName: 'Stark'
}
}
},
template: '
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
'
})
var example5 = new Vue({
el:'#example5'
})
</script>
</div>
</body>
</html>