Vue 综合- 插槽

####插槽普通使用：

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>
  `
})