Vue 自定义组件可同时通过属性、插槽设置内容的实施方案

在我们使用 UI 框架时,经常会遇到一些比较特殊的用法。例如某 Dialog 对话框,可以直接使用属性的方式指定对话框标题内容,这样比较快捷,标题样式看着也挺不错的,如果想要自定义标题样式,可以使用插槽的方式修改...

在我们使用 UI 框架时,经常会遇到一些比较特殊的用法。例如某 Dialog 对话框,可以直接使用属性的方式指定对话框标题内容,这样比较快捷,标题样式看着也挺不错的,如果想要自定义标题样式,可以使用插槽的方式修改,例如 element-uiDialog 对话框:

<!-- 使用属性设置标题内容 -->
<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>

本文标题为:Vue 自定义组件可同时通过属性、插槽设置内容的实施方案

上一篇: 1 Vue - 简介
下一篇: 01Vue3-认识Vue

基础教程推荐