Vue核心——组件Component

一， 什么是组件

组件的本质：

组件的本质是一段HTML代码，这段HTML代码会被当做模板，以便重复使用。

二，组件的创建

使用：
        必须声明，并注册后，才能使用。（下例为全局组件为例）

注意：
        组件中的HTML模板代码必须有一个唯一的根标签。

1，JS内部声明注册

原始写法

  //声明组件
  var tem1 = Vue.extend({
   
       template: '<div><h1>标题</h1><h2>子标题</h2> <p>内容</p></div>',
    });
    
   //注册组件
   Vue.component('com1', tem1)

简化写法

   Vue.component('com1', Vue.extend({
   
       template: '<div><h1>标题</h1><h2>子标题</h2> <p>内容</p></div>',
    });

最简化写法

   Vue.component('com1', {
   
       template: '<div><h1>标题</h1><h2>子标题</h2> <p>内容</p></div>',
    });

2，JS外部声明，内部注册

模板

<template id="tmpl">