内联模板

当 inline-template 这个特殊的特性出现在一个子组件上是，这个组件将会使用其里面的内容做为模板，而不是将其作为被 分发的内容 。这使得模板的撰写工作更加灵活

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

内联模板需要定义在 Vue 所属的 DOM 元素内

在阅读到这一节时，一个被分发的内容这个名词绕了一下。现结合场景进行了以下分析：

<my-component> 
 	内容代码...
 </my-component>

Vue 说明了如果 my-component 组件内未定义插槽，那么 “内容代码…” 将会被抛弃，如果定义了 <slot></slot> 普通插槽，那这里的内容的将会替换掉 <slot></slot> 所在的位置，那么，如果定义了多个具名插槽，“内容代码…” 将会根据代码含义分别替换具名插槽的位置。

也许是从这种机制中得出的灵感，分发 -> 分别发送给不同的插槽，因此将 组件的一对标签所包含的内容称为 分发的内容，或者更贴切的称为 待分发的内容。

而这里所说的 这个组件将会使用其里面的内容作为模板，则是指使用 “内容代码…” 完全替换掉原组件的模板【template属性】的内容

<div id="app">
    <my-component inline-template>
      <div>
        <p>These are compiled as the component's own template.</p>
        <p>Not parent's transclusion content.</p>
      </div>
    </my-component>
  </div>

const vm = new Vue({
  el: '#app',
  components: {
    myComponent: { template: '<div>我是原先的内容</div>' },
  },
  data: {
  },
});

有趣的是使用 inline-template 属性后，分发的内容 将同 标签一样必须存在一个根元素。

以上属个人理解，如有错误，欢迎指正。