Loading

Vue组件化

一、注册组件的基本步骤。

　　1、创建组件构造器

　　2、注册组件

　　3、使用组件

具体代码分析：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <div id="app">
10         <my-cpn></my-cpn>
11     </div>
12     <my-cpn></my-cpn> /*写在这里是无效的*/
13     <script src="../vue.js"> </script>
14     <script>
15         // 1、创建组件构造器对象
16         const cpnC = Vue.extend({
17             template:`
18                 <div>
19                     <h2>握手</h2>
20                 </div>
21             `
22         })
23         // 2、注册组件（全局组件，可在多个vue实例中使用）
24         Vue.component('my-cpn', cpnC)
25 
26         const app = new Vue({
27             el: '#app',
28             data: {
29 
30             }
31         })
32     </script>
33 </body>
34 </html>
View Code

 

　　首先调用Vue.extend()方法创建组件构造器，通常在创建组件构造器时，传入template代表我们自定义组件的模板，该模板就是在使用组件的地方，要显示的HTML代码，不过这种写法在VUE2.x的文档中几乎看不到了。

　　然后调用Vue.component()方法注册组件，该方法需要传递两个参数：A.注册组件的标签名。B.组件构造器名称

　　最后使用的时候要在Vue实例的作用范围内，否则不会生效。

注意：在template中使用的不是单引号，而是波浪号上的那个点，使用单引号是不能这样换行的，需要用加号连接。

二、组件的分类：全局组件和局部组件。

<script src="../vue.js"> </script>
    <script>
        // 1、创建组件构造器对象
        const cpnC = Vue.extend({
            template:`
                <div>
                    <h2>握手</h2>
                </div>
            `
        })
        // 2、注册组件（全局组件，可在多个vue实例中使用）
        Vue.component('my-cpn', cpnC)

        const app = new Vue({
            el: '#app',
            data: {},
            // 局部注册
            components: {
                // cpn 使用组件时的标签名
                cpn: cpnC
            }
        })
    </script>
View Code

一般局部组件使用的多一点，而且一般一个组件创建一个Vue实例。

注意：cpn: cpnC 使用的标签名，如果是大写驼峰命名如：MyCpn: cpnC那么vue解析标签名时会解析成my-cpn，若是直接使用MyCpn则会无效。

三、组件注册语法糖。

1、全局注册：

1   Vue.component('my-cpn', {
2             template:`
3                 <div>
4                     <h2>握手</h2>
5                 </div>
6             `
7         })
View Code

即:不再写Vue.extend()方法，直接将extend中的template对象写到注册器中，它会自己调用。

2、局部注册:

 1   const app = new Vue({
 2             el: '#app',
 3             data: {},
 4             // 局部注册
 5             components: {
 6                 // cpn 使用组件时的标签名,cnp加不加引号都可以
 7                 cnp:  {
 8                     template:`
 9                         <div>
10                             <h2>握手</h2>
11                         </div>
12                     `
13                 }
14             }
15         })
View Code

四、组件模板的分离写法。

1、利用script标签的text/x-template类型

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <div id="app">
10         <cpn></cpn>
11     </div>
12     <script type="text/x-template" id="cpn">
13         <div>
14            <h2>握手</h2>
15          </div>
16     </script>
17     <script src="../vue.js"> </script>
18     <script>
19       
20         // 2、注册组件（全局组件，可在多个vue实例中使用）
21         // Vue.component('cpn', {
22         //     template: '#cpn'
23         // })
24 
25         const app = new Vue({
26             el: '#app',
27             data: {},
28             // 局部注册
29             components: {
30                 // cpn 使用组件时的标签名
31                 cpn:  {
32                     template: '#cpn'
33                 }
34             }
35         })
36     </script>
37 </body>
38 </html>
View Code

2、直接使用template标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <div id="app">
10         <cpn></cpn>
11     </div>
12     <template id="cpn">
13         <div>
14            <h2>握手</h2>
15          </div>
16     </template>
17     <script src="../vue.js"> </script>
18     <script>
19       
20         // 2、注册组件（全局组件，可在多个vue实例中使用）
21         // Vue.component('cpn', {
22         //     template: '#cpn'
23         // })
24 
25         const app = new Vue({
26             el: '#app',
27             data: {},
28             // 局部注册
29             components: {
30                 // cpn 使用组件时的标签名
31                 cpn:  {
32                     template: '#cpn'
33                 }
34             }
35         })
36     </script>
37 </body>
38 </html>
View Code

 五、组件中的data为什么必须是函数。

 1 a() {
 2     return {
 3         'a':b,
 4         'b':c
 5     }
 6 }
 7 
 8 let obj1 = a()
 9 let obj2 = a()
10 let obj3 = a()
11 这三个对象是不同的，每次调用a函数时，它都会新建新对象
View Code
let obj = {
    'a':b,
    'b':c 
}
a(){
    return obj
}
let obj1 = a()
let obj2 = a()
let obj3 = a()
此时三个对象是同一个
View Code

通过上面对比可以知道，当组件的data是对象时，该组件被多次调用时，会导致它们对应同一个data，当一个做修改后，其他调用的地方也会被改变，而使用函数时，多次调用都会生成新对象，从而避免了互相影响。

 

posted @ 2020-05-07 10:45  Yang-0394  阅读(129)  评论(0)    收藏  举报