Vue 自定義組件可同時通過屬性、插槽設置內容的實施方案

在我們使用 UI 框架時，經常會遇到一些比較特殊的用法。例如某 Dialog 對話框，可以直接使用屬性的方式指定對話框標題內容，這樣比較快捷，標題樣式看着也挺不錯的，如果想要自定義標題樣式，可以使用插槽的方式修改，例如 element-ui 的 Dialog 對話框：

<!-- 使用屬性設置標題內容 -->
<el-dialog title="提示">
  <!-- content -->
</el-dialog>

<!-- 使用插槽設置標題內容 -->
<el-dialog>
  <div #title>
    <!-- 自定義標題內容 -->
  </div>
  <!-- content -->
</el-dialog>

這是如何實現的呢？通過思考，我得出了以下解決方案（和源碼實現方式一致）：

<!-- 封裝的子組件 —— child.vue -->
<template>
  <div class="child">
    <!-- 通過屬性方式設置內容，最終是設置了插槽的默認內容 -->
    <div class="title">
      <slot name="title">{{title}}</slot>
    </div>
		
    <div class="cotent">這是新聞內容……</div>
  </div>
</template>

<script>
  export default {
    name: "child",
    props: {
      title: String
    }
  }
</script>

<!-- 父組件 —— index.vue -->
<template>
  <div class="index">
    <!-- 通過屬性方式設置標題內容 -->
    <child-cpn title="今天天氣不錯"></child-cpn>
    <!-- 通過插槽方式設置標題內容 -->
    <child-cpn>
      <template #title>
        <div style="background-color: aliceblue;">今天天氣不錯</div>
      </template>
    </child-cpn>
  </div>
</template>

<script>
  import childCpn from './childCpns/child.vue'
	
  export default {
    name: 'index',
    components: {
      childCpn
    }
  }
</script>