vue 函数式组件

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

给函数式组件传递事件

// 子组件
<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