Vue函数式组件

 

函数式组件不会被创建为组件（vm），因此它无状态（没有响应式数据vm._data)，也没有实例 (没有 this 上下文)。

而FunctionalRenderContext类的实例，提供渲染上下文。

 

一 父组件

App.vue文件

<template>
	<div class="app">
		<news-title  type="sport" theme="足球">
                    世界杯
		</news-title>
	</div>
</template>
<script>
import NewsTitle from "./NewsTitle";

export default {
  name: "App",
  components: {
    NewsTitle
  }
};
</script>

 

二 函数式组件

NewTitle.vue文件

<script>
import SportTitle from './SportTitle';
import MusicTitle from './MusicTitle';

export default {
  name: "NewsTitle",
  // 函数式组件的标志，必须
  functional: true,
  props: {
    type: {
      type: Strin