vue段落标题组件

1.BlockHeader.vue

<template>
  <div class="yh-block-header">
    <span class="yh-title">{{title}}</span>
    <slot></slot>
    <yh-button v-if="rightButton !== undefined" @click="$emit('rightButtonClicked')">{{rightButton}}</yh-button>
  </div>
</template>
<script>
import yhbutton from "./Button";
export default {
  name: "BlockHeader",
  data() {
    return {};
  },
  props: ["title", "rightButton"],
  methods: {},
  components: {
    "yh-button": yhbutton
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.BlockHeaderDemo.vue

<template>
  <div class="yh-page">
    <h1>BlockHeader演示</h1>
    <div class="yh-block">
      <yh-block-header title="模块一" rightButton="编辑" @rightButtonClicked="onEdit"></yh-block-header>
    </div>
    <div class="yh-block">
      <yh-block-header title="模块二">
        <yh-button @click="onInfo">详情</yh-button>
        <yh-button @click="onEdit">编辑</yh-button>
      </yh-block-header>
    </div>
  </div>
</template>
<script>
import yhblockheader from '../comcompont/BlockHeader'
import yhbutton from "../comcompont/Button";
export default {
  name: "BlockHeaderDemo",
  data() {
    return {};
  },
  methods: {
    onEdit() {},
    onInfo() {}
  },
  components: {
    "yh-button": yhbutton,
    "yh-block-header": yhblockheader
  }

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
</style>