[js]vue组件核心

element table自定义col

一时没理解elment的自定义字段, 因此在此对组件作用域插槽做了一番探索

<template>
  <el-table :data="list" style=" 100%;padding-top: 15px;">
    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">
        {{ scope.row.order_no | orderNoFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template slot-scope="scope">
        ¥{{ scope.row.price | toThousandFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

elment-col.js组件

  render(h) {
    // slots 也要渲染，需要计算合并表头
    return h('div', this.$slots.default);
  }

api数据

组件传值

绑定属性, props接收

组件插槽

1. 默认插槽/具名插槽
2. 作用域插槽: 封装组件时会被经常用到

案例: Level.js 组件

export default {
    props:{
        type:String | Number
    },
    methods:{
        handleClick(e){
            console.log(e.target)
        },
        handleInput(e){
           this.msg = e.target.value
        }
    },
    data(){
      return {msg:'zf'}
    },
    mounted(){
    },
    render(h){ // jsx => js + xml 去写代码
        // h('h'+this.type,{},[this.$slots.default])
        let tag = 'h' + this.type
        return <tag>
            <input type="text" value={this.msg} onInput={this.handleInput}/>
            <span  onClick={this.handleClick}>{this.$slots.default}</span>
            {this.msg}
        </tag>

        // https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx
    }
}

element的table-column.js组件:

  render(h) {
    // slots 也要渲染，需要计算合并表头
    return h('div', this.$slots.default);
  }

template和render函数渲染组件

template  html方式渲染组件
render    js方式渲染组件
  createElement  返回vNode
  jsx            返回vNode

vNode最终被$mount挂载成vueComponent 最终被渲染成dom树

<template>
  <div>我是子君，我的公众号是<span class="emphasize">前端有的玩</span></div>
</template>

编译后成了render函数, 因此render函数的方式写组件执行效率更高

function () {
  var e = this,
  // e._self._c 对应源码里面的createElement
  t = e._self._c;
  // 返回了一个 createElement('div',[])
  return t("div", [
    // e._v 对应源码里面的createTextVNode
    e._v("我是子君，我的公众号是"),
    t("span", { staticClass: "emphasize" }, [e._v("前端有的玩")]),
  ]);
}

render函数 函数式组件

createElement 返回vNode,
多个vNode组成vDom

函数式组件
    functional:true,
    不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件
    没有this, props, slots等都在context上面挂着

组件操作其他api

Vue.extend
Vue.mxin

let MessageConstructor = Vue.extend(MessageComponent);
let instance = new MessageConstructor({ // 给这个组件传入了data数据
    data:options //选项会和原组件的合并
});

new Vue({
    el:       优先级最低
    template: 优先级
    render:   优先级最高
})

vm.$mount()时:
  挂载时检查template/render
  给$el赋值


vm.$mount(): 给$el赋值
  无参 获取template实例
  有参 获取template实例 + 作为这个参数的子元素

为什么使用函数式组件

最主要最关键的原因是函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件
函数式组件结构比较简单，代码结构更清晰