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

标签：title   直接   div   def   log   方案   tle   code   rop   

在我们使用 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>

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

标签：title   直接   div   def   log   方案   tle   code   rop   

原文地址：https://www.cnblogs.com/haveadate/p/14619214.html