Vue组件化开发 | 易学教程

组件使用的三个步骤

1.创建组件构造器

2.注册组件

3.使用组件

<div id="app">
  <!-- 使用组件 -->
  <cpn></cpn>
</div>
<script>
  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template:`
      <div>
         <h2>我是标题</h2>
      </div>`
   });
   // 2.注册组件(标签名，组件构造器)
   Vue.component("cpn",cpnC)  

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

各步骤的含义：

1.Vue.extend()：

调用Vue.extend()创建的是一个组件构造器。
通常在创造组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。

2.Vue.component():

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传两个参数：1、注册组件的标签名 2、组件构造器

全局组件和局部组件

1.全局组件：通过Vue.component注册组件

2.局部组件：在创建的Vue实例中注册组件

const app=new Vue({
            el:"#app",
            components: {
                // 键（标签名）：值（组件构造器)
                cpn:cpnC
            }
        })

父组件与子组件

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

<script>
 // 创建第一个组件构造器（子组件）
const cpnC1 = Vue.extend({
  template:`
  <div>
     <h2>我是标签1</h2>
     <p>呵呵呵</p>
  </div>
                `
})

// 创建第二个组件构造器(父组件)
const cpnC2 = Vue.extend({
  template:`
    <div>
       <h2>我是标签2</h2>
       <p>哈哈哈</p>
       <cpn1></cpn1>
    </div>
   `,
// 在组件构造器二中注册组件一
components: {
  cpn1:cpnC1
  }
})
	new Vue({
      el:"#app",
      components: {
      // 在Vue实例中注册组件二
      pn2: cpnC2
      }
 })
</script>

组件注册语法糖：全局组件

<div id="app">
            <cpn1></cpn1>
        </div>
        <script>
            Vue.component('cpn1',{
                template:`
                <div>
                    <h2>我是标签1</h2>
                    <p>呵呵呵</p>
                </div>
                `
            })
        new Vue({
            el:"#app",
        })
        </script>

组件注册语法糖：局部组件

new Vue({
            el: "#app",
            // 语法糖方式注册局部组件
            components: {
                'cpn2': {
                    template: `
                <div>
                    <h2>我是标签2</h2>
                    <p>哈哈哈</p>
                </div>
                `
                }
            }
        })

由于将html标签与js代码写在一起会显得代码比较乱，所以可以使用以下写法：

<template id="cpn">
        <div>
            <h2>我是标题</h2>
            <p>哈哈哈</p>
        </div>
</template>

    <script>
        // 注册全局组件
        Vue.component('cpn', {
            template: '#cpn'
        })
        new Vue({
            el: "#app",
        })
    </script>

来源：CSDN

作者：coder-lxy

链接：https://blog.csdn.net/qq_46178261/article/details/104541066

标签

vue

构造器