vue element-ui之dialog組件title插槽的使用

dialog對話框組件title屬性的slot使用方法
使用背景
需要單獨控制title中某個數據顯示及樣式，footer也一樣

      <el-dialog
        // 也可以這樣寫,但是沒有辦法單獨控制name age的顯示
        // title="name+ '' + age"
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        // 這里的插槽會替換title顯示的內容
        <div slot="title" class="header-title">
            <span v-show="name" class="title-name">name {{ name }}</span>
            <span class="title-age">age {{ age }}</span>
        </div>
        <span>這是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
        </span>
      </el-dialog>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        name: 'freely',
        age: 20
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('確認關閉？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>