Vue 函数式组件 functional

函数式组件

• 无状态
• 无法实例化
• 内部没有任何生命周期处理函数
• 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)
• 在template标签里标明functional
• 只接受props值
• 不需要script标签

父组件

<template>
  <div class="hello">
    <btn
      :selfArray=[1,2,3]
      :click="click"
    ></btn>
  </div>
</template>

<script>
import btn from './test.vue'
export default {
  components: {
    btn
  },
  name: 'HelloWorld',
  methods: {
    click() {
      alert(1)
    }
  }
}
</script>

子组件

<template functional>
  <div>
    <button
      class="btn"
      v-for="item in props.selfArray"
      :key="item"
      @click="props.click"
    >
      <slot />
      132
    </button>
  </div>
</template>
<style scoped>
.btn {
  width: 50px;
  height: 50px;
  background-color: red;
}
</style>