Vue-Component

Vue-Component

Posted by 梁三叶 on 2019-01-10

组件相关

全局组件

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <h1>全局组件 实例</h1>
    <hr>
    <div id="app">
        <!--必须放在Vue的作用域下-->
        <lsy></lsy>
    </div>
   <!--放在外面是不管用的-->
    <lsy></lsy>
    <script type="text/javascript">
    Vue.component('lsy',{
        template: '<div style="color:red">我是全局的lsy组件</div>'
    })
    var app=new Vue({
        el:'#app'
    })
    </script>
</body>

局部组件

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <h1>局部组件 实例</h1>
    <hr>
    <div id="app">
        <!--必须放在Vue的作用域下-->
        <lsy></lsy>
        <lcc></lcc>
    </div>
    <script type="text/javascript">
    Vue.component('lsy',{
        template: '<div style="color:red">我是全局的lsy组件</div>'
    })
    var app=new Vue({
        el:'#app',
        components:{
            "lcc":{
                template: '<div style="color:green">我是局部的lcc组件</div>'
            }
        }
    })
    </script>
</body>

最终效果

组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。

props属性设置

例如，在自定义局部lcc组件上面设置here属性，在组件模板进行相应修改，增加组件选项props，其为数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <h1>component_2</h1>
    <hr>
    <div id="app">
        <lcc here="China"></lcc>
        <lcc v-bind:here="message"></lcc>
    </div>
    <script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            message:'China'
        },
        components:{
            "lcc":{
                template: '<div style="color:green">lcc from {{here}}</div>',
                props:[
                    'here'
                ]
            }
        }
    })
    </script>
</body>

注意：在取名自定义属性时，注意不要取带有-的属性名，因为vue,不认同这种写法。要是实在取了，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。把构造器中data的值传递给组件，我们只要进行绑定就可以了，就是使用v-bind：xxx。

父子组件关系

构造器外面写局部组件

局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。
我们把组件编写的代码放到构造器外部或者说单独文件。
我们需要先声明一个对象,对象里就是组件的内容。

var jspang = {template:'<div>Panda from China!</div>'}

声明好对象后在构造器里引用就可以了。

components:{ "lcc":jspang }

html中引用

<lcc></lcc>

父子组件的嵌套

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-3</title>
</head>
<body>
    <h1>component-3</h1>
    <hr>
    <div id="app">
      <lcc></lcc>  
    </div>
    <script type="text/javascript">
       var city={
           template:`<div>Sichuan of China</div>`
       }
        var jspang = {
            template:`<div>
                    <p> Panda from China!</p>
                    <city></city>
            </div>`,
            components:{
                "city":city
            }
        }
        var app=new Vue({
            el:'#app',
            components:{
                "lcc":jspang
            }
        })
    </script>
</body>
</html>

Component 标签

我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.

1
2
3
4
5
6
7
8
9
 var componentA={
     template:`<div>I'm componentA</div>`
}
 var componentB={
      template:`<div>I'm componentB</div>`
}
var componentC={
    template:`<div>I'm componentC</div>`
}

我们在构造器的components选项里加入这三个组件

1
2
3
4
5
components:{
    "componentA":componentA,
    "componentB":componentB,
    "componentC":componentC,
}

我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件
<component v-bind:is="who"></component>

这就是我们的组件标签的基本用法。我们提高以下，给页面加个按钮，每点以下更换一个组件。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-4</title>
</head>
<body>
    <h1>component-4</h1>
    <hr>
    <div id="app">
       <component v-bind:is="who"></component>
       <button @click="changeComponent">changeComponent</button>
    </div>
    <script type="text/javascript">
        var componentA={
            template:`<div style="color:red;">I'm componentA</div>`
        }
        var componentB={
            template:`<div style="color:green;">I'm componentB</div>`
        }
        var componentC={
            template:`<div style="color:pink;">I'm componentC</div>`
        }
        var app=new Vue({
            el:'#app',
            data:{
                who:'componentA'
            },
            components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC,
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentA'){
                        this.who='componentB';
                    }else if(this.who=='componentB'){
                        this.who='componentC';
                    }else{
                        this.who='componentA';
                    }
                }
            }
        })
    </script>
</body>
</html>

CATALOG
    FEATURED TAGS
    Vue-Component
    FRIENDS