VUE学习笔记（二）组件化开发（非CLI下）

89 阅读 0 评论 59 点赞

我是靠谱客的博主愉快机器猫，这篇文章主要介绍VUE学习笔记（二）组件化开发（非CLI下），现在分享给大家，希望可以做个参考。

组件化开发（非CLI下）

步骤：

创建组件构造器
注册组件
使用组件

第一种方法

使用Vue.extend()创建组件：

复制代码

1
2
3
4
5
6
7
8
const component = Vue.extend({
      template:`
        <div>
        <h2>第一个组件</h2>
        </div>
        `
    })

使用Vue.component()注册组件。

复制代码

1
2
Vue.component('cpn',component)

使用组件。

复制代码

1
2
3
4
<div id="app">
  <cpn></cpn>
</div>

第二种方法

先定义组件。
①在script中定义，type为：text/x-template：

复制代码

1
2
3
4
5
6
7
<script type="text/x-template" id="cpn">
    <div>
      <h2>第一个组件</h2>
      <p>hahaha</p>
    </div>
</script>

②使用template标签：

复制代码

1
2
3
4
5
6
7
<template id="cpn">
  <div>
    <h2>第一个组件</h2>
    <p>hahaha</p>
  </div>
</template>

注册组件。

复制代码

1
2
3
4
Vue.component('cpn',{
      template:"#cpn"
    })

使用组件。

复制代码

1
2
3
4
<div id="app">
  <cpn></cpn>
</div>

完整代码示例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>Component-test</title>
  </head>
  <body>
    <div id="app">
      <cnp></cnp>
      <cpn></cpn>
    </div>
    <template id="cpn">
      <div>
        <h2>{{title}}</h2>
        <p>hahaha</p>
      </div>
    </template>
  </body>
  <script src="../js/vue.js"></script>
  <script type="text/x-template" id="cnp">
    <div>
      <h2>第一个组件</h2>
      <p>hahaha</p>
    </div>
  </script>
  <script>
    /*
    组件不能访问Vue实例的数据
    组件中也可以有data，但是这个data必须是一个方法，返回的结果是一个对象
    Q:data为什么是一个函数？
    A：保证同一组件的不同组件实例的数据分离的
    */
    //2、注册组件
    Vue.component('cnp',{
      template:"#cnp"
    })
    Vue.component('cpn',{
      template:"#cpn",
      data(){
        return {
          title: '第二个组件'
        }
      }
    })
    const app = new Vue({
      el:'#app',
      data:{}
    })
  </script>
</html>