用于让插槽可以使用子组件的数据。
·组件将需要被插槽使用的数据通过v-bind 绑定给，
这种用于给插槽传递数据的属性称为插槽prop。
·组件绑定数据后，插槽中需要通过v-slot 接收数据。
·如果只存在默认插槽，同时又需要接收数据，可以进行简写：
·还可以通过ES6的解构操作进行数据接收。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<div id=“app”>
<com-a>
<template v-slot:default=“dataObj”>
{{ dataObj.value }}
{{ dataObj.num }}
</template>
<template v-slot:footer=“dataObj”>
{{ dataObj.value }}
</template>
</com-a>
<com-b #default=“dataObj”>
{{ dataObj }}
</com-b>
<com-b v-slot=“{ value, num }”>
{{ value }}
{{ num }}
</com-b>
</div>
<script src=“lib/vue.js”></script>
<script>
// 子组件B的选项对象
var ComB = {
template: `
组件B的内容:
:value=”value”
:num=”num”
>
`,
data () {
return {
value: ‘这是组件B内部的数据’,
num: 200
}
}
};
// 子组件A的选项对象
var ComA = {
template: `
组件A的内容:
v-bind:value=”value”
:num=”num”
>
:value=”value”
>
`,
data () {
return {
value: ‘这是组件A内部的数据’,
num: 100
}
}
};
new Vue({
el: ‘#app’,
components: {
ComA, ComB
}
});
</script>
</body>
</html>
