vue コンポーネントとは何ですか? Vue コンポーネントの概要

{
  data(){
    return {
      //
    }
  },
  computed:{
    displayName(){
      return '';
    }
  },
  methods:{
    onClickHandler(params){
      // do something
    }
  }
}

  data选项有两种定义方式：
  
  一、对象形式：
  
  ```
  data:{
    //引用该组件的地方，共用一个状态的引用，以至于，只要有一处修改了$data中的某一属性值，其它引用该组件的地方也跟随着改变该属性值（其实，不是跟随，本来就是同一个指向）。
  }
  ```
  
  二、函数形式：
  
  ```
  data(){
    return {
      //引用该组件的地方，每一个组件都会获得独立的引用，互不干扰。
    }
  }
  ```

{
  template: &#39;<h1 v-if="level === 1">简单示例</h1>&#39;,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    简单示例
  </h1>
</script>
{
  template: &#39;#anchored-heading-template&#39;,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

{
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

<template>
  <div>
    ...
  </div>
</template>
<script>
...
export default{
  ...
}
...
</script>
<style>
...
</style>