分类：vue

先写一个正常的vue组件

写一个创建组件的方法

import Vue from 'vue'

/**
 * 创建一个根组件
 * @param Component 组件
 * @param props 组件属性
 */
const createComponent = (Component, props) => {
  // vue.extend()获取创建实例
  const Ctor = Vue.extend(Component)
  // 创建组件实例,这时得到的是虚拟dom，如何转化为真实dom
  const comp = new Ctor({
    // propsData: props
  })
  // 前面说到$mount就是这个作用
  comp.$mount()
  // 挂在在body上，这时是comp的dom
  document.body.appendChild(comp.$el)
  comp.remove = () => {
    // 移除本身
    document.body.removeChild(comp.$el)
    // 释放自己所占资源
    comp.$destroy()
  }
  return comp
}

export default createComponent

定义打开弹窗方法

import CandyBox from './CandyBox'
import createComponent from './createComponent'

const Modal = {}
// 弹窗组件实例
const modalInstance = {}
const openModal = (name, Component, options) => {
  if (!modalInstance[name]) {
    modalInstance[name] = createComponent(Component)
  }
  // 在渲染完成打开，否则首次动画播放有问题
  setTimeout(() => {
    modalInstance[name].open(options)
  })
}
Modal.candyBox = (options = {}) => {
  openModal('candyBox', CandyBox, options)
}
export default Modal

如果需要预加载定义预加载方法

// 弹窗预加载 (可在项目入口调用该函数，实现弹窗预加载)
Modal.prefetch = () => {
  modalInstance.candyBox = createComponent(CandyBox)
}
/**

在项目入口执行预加载

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import Modal from './components/Modal'

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})
Modal.prefetch()

使用Object.assign

Object.assign(this.somedetail, detail);

应该使用

this.somedetail = Object.assign({}, this.somedetail,detail);

使用Vue.set

this.$set(this.somedetail,detail);

Vue.set(this.somedetail,detail);

如果是数组不更新

使用数组自定义方法push，pop，shift，unshift,splice

使用函数式编程可以提高渲染效率，因为它没有状态，没有实例，并且它是一个组件可复用。下面用例展示了如何使用函数式组件。

给函数式组件传递事件

// 子组件
<template functional>
    <div v-example v-on="listeners">{{props.msg}}</div>
</template>

// 父组件 
<list @click="handleClick" :msg="msg"></list>
 handleClick() {
      // eslint-disable-next-line no-debugger
      debugger;
      this.msg = 'aaa';
    }

函数式组件可以自己定义类，也可接收外部传入的类。样式同理。

<template functional>
    <div class="x" :class="[data.class, data.staticClass]" v-example v-on="listeners" :style="data.staticStyle">{{props.msg}}</div>
</template>

在函数式组件中加入别的组件，且别的组件可以不是函数式组件。

<template functional>
    <div class="x" :class="[data.class, data.staticClass]" v-example>
        {{props.msg}}
        <component :is="injections.components.Pane"/>
        <button  v-on="listeners">action</button>
    </div>
</template>

<script>
    import Pane from './Pane';
    export default {
        inject: {
            components: {
                default: {
                    Pane,
                }
            }
        }
    }
</script>

在函数式组件中更改数据源内容

<template functional>
    <div>
        {{$options.setContent(props.msg)}}
    </div>
</template>

<script>
    export default {
        setContent(val) {
            return val + 'sldkflkjdf';
        }
    }
</script>

插槽在函数式组件中能正常使用

成为函数式组件中，不能在script中写props