Vue 内联模板(inline-template)

🚀 内联模板不会把子组件的内容分发渲染到父组件中

🚀 而是需要在父组件中实现其内容的渲染

父组件

<template>
  <div>
    <template-inline inline-template>
      <!-- 🚀只能有一个根元素 -->
      <div>
        <div>{{msg}}</div>
        <!-- ❌❌ 无法使用父组件data ❌❌ -->
         <div>{{name}}</div>
      </div>
    </template-inline>
  </div>
</template>

<script>
import TemplateInline from './inline-template'
export default {
  components: {  TemplateInline },
  data() {
    return {
      name:'父组件数据name'
    }
  },
}
</script>

子组件

<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  data() {
    return {msg: "inline content in child component"}
  }
}
</script>