Vue.component("comp", {
template: "<div><h3>子组件标题</h3><slot>子组件内容</slot></div>"
})
Vue.component("child", {
template: "<div class='child'><slot text='hello form child'></slot></div>"
})
new Vue({
el: "#app",
data () {
}
})
<div id="app">
<!-- 单个插槽 -->
<div>
<h2>父组件标题</h2>
<comp>
<p>父组件内容</p>
</comp>
</div>
<!-- 作用域插槽 -->
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
html,body{
background-color:#333;
color:#999;
}