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>