元件傳值

繫結屬性, 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例項 + 作為這個引數的子元素