VUE学习-组件创建

创建组件的三个步骤

一：调用 const cpn=vue.extend()创建组件构造器

二：注册组件vue.component('cpn',cpn)

         组件注册分为两种 即 全局组件和局部组件

         我们常用的组件注册方式为局部组件

三：使用组件<cpn></cpn>

<div id="app1">
  <!--3.使用组件 组件必须在vue挂载的实例下使用-->
  <cpn1></cpn1><!--全局组件 能展示-->
  <cpn2></cpn2><!--局部组件 能在app1实例中展示-->
</div>
<div id="app2">
  <!--3.使用组件 组件必须在vue挂载的实例下使用-->
  <cpn1></cpn1><!--全局组件 能展示-->
  <cpn2></cpn2><!--局部组件 不能在app2实例中展示-->
</div>
<div>
 <!--这样是出不来效果的-->
  <cpn></cpn>
</div>
<script>
// 1.创建组件构造器
  const cpn1 = vue.extend({
    template:`<div>
        <h2>标题1</h2>
        <p>内容1</p>
      </div>`
   });
const cpn2 = vue.extend({
    template:`<div>
        <h2>标题2</h2>
        <p>内容2</p>
      </div>`
   });
//2.注册组件 这是全局注册方式
  vue.component('cpn1',cpn1);


  const app1 = new Vue({
    el:"#app1",
    components:{
     cpn2:cpn2 
    }
  });

  const app2 = new Vue({
    el:"#app2",
  });
</script>

当然vue2x之后还提供了组件注册的语法糖

<div id="app">
  <cpn1></cpn1><!--全局组件-->
  <cpn2></cpn2><!--局部组件-->
</div>
<script>

//2.构造注册一步到位
  vue.component('cpn1',{
    template:`<div>
        <h2>标题1</h2>
        <p>内容1</p>
      </div>`
   });


  const app = new Vue({
    el:"#app",
    components:{
     'cpn2':{
      template:`<div>
        <h2>标题2</h2>
        <p>内容2</p>
      </div>`
      }
    }
  });

 
</script>

HTML代码和js代码写到一起是十分不友好的一种写法

因此有两种模板分离写法

第一种是script标签 类型为text/x-template

第二种template

<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>


<!--使用script标签-->
<script type="text/x-template" id="cpn1">
 <div>
   <h2>标题1</h2>
   <p>内容1</p>
  </div>`
</script>


<!--使用template标签-->
<template id="cpn2">
  <div>
   <h2>标题2</h2>
   <p>内容2</p>
  </div>
<template/>


<script>


  const app = new Vue({
    el:"#app",
    components:{
     'cpn1':{
      template:'#cpn1'
      },
     'cpn2':{
      template:'#cpn2'
      },
    }
  });

 
</script>

附上vue 小破站学习链接

最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili