vue-slot

slot分发内容

by li gang

HTML

<header>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
</header>

<body>
  <div id="app">
    <my-component>
      <template>
        <p>父组件分发内容</p>
      </template>
    </my-component>
    <my-component></my-component>
    <my-component2>
      <b>内容a</b>
      <template slot="title">
        父组件分发的title
      </template>
      <b>内容b</b>
    </my-component2>
  </div>
</body>

JavaScript

const app = new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: `<div>
      	<slot><p>备选内容</p></slot>
      </div>`
    },
    'my-component2': {
    	template: `<div>
      	<slot name="title">备选title</slot>
        <slot>
        	<b>备选内容</b>
        </slot>
      </div>`
    }
  }
});