vue，你知道却没用过的技巧

render

问题： 在element-ui中，table可以使用render这个方法，那么这个方法是怎么实现的？ 我们可以不可以这样使用？？
回答： 当然可以了， 以下是实现步骤：

1. 新建文件expand.js

export default {
  name: 'expand',
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index
    }
    if (ctx.props.column) params.column = ctx.props.column
    return ctx.props.render && ctx.props.render(h, params)
  }
}

2. 新建component.vue

<div v-if="item.render">
              <Expand :row="row" :render="item.render"></Expand>
</div>
import Expand from './expand.js'
export default {
  components: { Expand },
  data() {
    return {
      row: {
        key: 'key',
        title: "title",
      },
      item: {
           render: (h, params) => {
            const { row, index } = params;
            return h('a-col', {
                  attrs: {
                    'data-json': JSON.stringify(row),
                    'data-index': index,
                    span: 12
                  },
                  domProps: {
                    innerHTML: item.departmentName
                  }
                });
        }
      }
    }
  }
}

v-model

常常看见组件里面使用v-model，但是不知道他是怎么回事。
其实，百度一吓你就知道。

注意以下几点：
props.value。
this.$emit('input', value);
这两个是实现v-model的基础。

ps: 额外知识点
listeners 获取组件内传递过来的事件。

<template>
  <div>
    <el-input
        type="textarea"
        class="use-textarea"
        :rows="rows"
        :maxlength="maxlength"
        :value="value"
        v-bind="$attrs"
        v-on="$listeners"
        :placeholder="placeholder"
        @input="value => handleInput(value)">
      </el-input>
      <span class="user-textarea-count" v-if="maxlength > 0">{{value.length}}/{{ maxlength }}</span>
  </div>
</template>
<script>
export default {
  name: 'textarea-components',
  data () {
    return {};
  },
  props: {
    maxlength: {
      type: [Number, String],
      default: 0,
    },
    value: {
      type: [String, Number],
      default: '',
    },
    rows: {
      type: [String, Number],
      default: 3,
    },
    placeholder: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleInput (value) {
      this.$emit('input', value);
    },
  },
};
</script>
<style lang='less' scoped>
  /deep/ .use-textarea{
    textarea{
      resize: none;
    }
  }
  .user-textarea-count{
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 0.7;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #919EAB;
    letter-spacing: 0;
    line-height: 22px;
  }
</style>