作用域插槽
vue.js官方手册
官方说法: 有时让插槽内容能够访问子组件中才有的数据是很有用的
解释:
<!--自定义的组件模板-->
<span>
<slot>{
{ user.lastName }}</slot>
</span>
<!--调用组件-->
<current-user>
{
{ user.firstName }}
</current-user>
current-user是我们自己定义的组件, 在定义组件时我们在组件的data内部设置了一个对象user, 其值为{firstName: "尤", lastName: "雨溪"}, 在使用时我们希望使用上方代码形式{
{ user.firstName }}替换组件里面的后备内容{
{user.lasttName}}. 单纯按照上方代码运行, 会报错(Error in render: "TypeError: Cannot read property 'firstName' of undefined"), 原因是组件的data和页面的data相互独立.
解决: 使用v-slot, 将插槽的对象提取出来, 使子组件进行调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>作用域插槽</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<current-user v-slot="randomStr"> <!--randomStr为任意值,根据自己的喜好选择-->
{
{randomStr.user.firstName}} <!--randoms.Xxx .Xxx后面的是组件:user="user"-->
</current-user> <!--randoms.Xxx .Xxx后面的是组件:Xxx="user"-->
</div>
<script>
Vue.component("current-user", {
data() {
return {
user: {
firstName: "尤", lastName: "雨溪" },
};
},
template: `
<span>
<slot :user="user">{
{ user.lastName }}</slot>
</span>
`,
});
var vm = new Vue({
el: "#app",
data() {
return {
};
},
methods: {
},
});
</script>
</body>
</html>
图解:
