插槽普通使用：
``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'
Vue.config.productionTip = false
const compoent = { template: <div :style="style"> <slot></slot> </div> , data () { return { style: { width: '200px', height: '200px', border: '1px solid #aaa' } } } }
new Vue({ el: '#app', components: { compOne: compoent }, data () { return { value: '123' } }, template: <div> <comp-one> <span>this is content - {{value}}</span> </comp-one> </div> }) ```
具名插槽使用：
``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'
Vue.config.productionTip = false
const compoent = { template: <div :style="style"> <div class="header"> <slot name="header"></slot> </div> <div class="body"> <slot name="body"></slot> </div> </div> , data () { return { style: { width: '200px', height: '200px', border: '1px solid #aaa' } } } }
new Vue({ el: '#app', components: { compOne: compoent }, data () { return { value: '123' } }, template: <div> <comp-one> <span slot="header">this is header - {{value}}</span> <span slot="body">this is body - {{value}}</span> </comp-one> </div> }) ```
插槽使用内部属性字段：
``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'
Vue.config.productionTip = false
const compoent = { template: <div :style="style"> <slot value="456" :text="text"></slot> </div> , data () { return { style: { width: '200px', height: '200px', border: '1px solid #aaa' }, text: 'dzm' } } }
new Vue({ el: '#app', components: { compOne: compoent }, data () { return { value: '123' } }, mounted () { console.log(this.$refs.comp, this.$refs.span); }, template: <div> <comp-one ref="comp"> <span slot-scope="props" ref="span">{{props.value}} {{props.text}} {{value}}</span> </comp-one> </div> }) ```
