vue functional函數式組件

第1種寫法

test.vue

<template functional>
  <div class="test">
    {{props.test.name}}
  </div>
</template>

<script>
export default {
  props: {
    test: Object,
    default: () => ({})
  }
}
</script>

父組件 index.vue

<template>
  <div>
    <test :test="{name: 'vue'}"></test>
  </div>
</template>
<script>
import test from './test'
export default {
  components: {
    test
  }
</script>

第2種寫法

test.js

import Vue from 'vue'

Vue.component('test', {
  functional: true,
  props: {
    test: {
      type: Object,
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement(
      'div',
      {
        attrs: {
          class: 'test'
        }
      },
      [context.props.test.name]
    )
  }
})

父組件 index.vue

<template>
  <div>
    <test :test="{name: 'vue'}"></test>
  </div>
</template>
<script>
import './test.js'
</script>