manlili blog

Vue组件

发表于 | 分类于

项目中自己写组件的机会不是很多，但是研究一下，尤其是父子组件之间的通信。
github地址:https://github.com/manlili/vue_learn里面的lesson12

创建组件的步骤

直接用例子说明

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var myComponent = Vue.extend({   //第一步:定义
                template: '<div>我是内容</div>'
            })
            
            Vue.component('zujian',myComponent)  //第二步:注册到Vue上面
            
            var myVue = new Vue({    //第三步:创建实例化
                el: '.test'
            })
        </script>
    </body>
</html>

或者用一种简单的方法创建组件

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <template id="lili-template"> <!--注意此处必须是id,用class不行-->
            <div>我是内容2</div>
        </template>
        <div class="test">
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: '.test',
                components: {
                    zujian: {
                        template: '#lili-template'
                    }
                }
            })
        </script>
    </body>
</html>

父子组件

下面来看个例子

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--父子组件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test"> <!--局部注册-->
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var childComponent = Vue.extend({   //第一步:定义
                template: '<div class="mychild">我是孩子</div>'
            });
            var parentComponent = Vue.extend({
                template: '<div class="myParent">我是父容器<child></child></div>',  //注意此处要引用孩子组件
                components: {
                    'child': childComponent
                }
            });
            Vue.component('zujian',parentComponent);  //第二步:注册到Vue上面
            
            var myVue = new Vue({    //第三步:创建实例化
                el: '.test'
            })
        </script>
    </body>
</html>

或者另一种比较明了的写法:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--父子组件另一种写法</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <zujian></zujian>
        </div>
        <template id="parentComponent">
            <div class="myParent">
                我是父容器
                <child></child>
            </div>
        </template>
        
        <template id="childComponent">
            <div class="mychild">
                我是孩子
            </div>
        </template>
        
        <script type="text/javascript">
            
            var myVue = new Vue({ 
                el: '.test',
                components: {
                    zujian: {
                        template:'#parentComponent',
                        components: {
                            child: {
                                template:'#childComponent'
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

Vue组件选项

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--组件选项</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="lala">
                <zujian></zujian>
            </div>
        </div>
        <script type="text/javascript">
            var myComponent = Vue.extend({   
                template: '<div>我是{{a}}{{b}}</div>',
                data : function () {   //不想让MyComponent 所有的实例将共享同一个 data 对象,所以将data写成函数形式返回
                    return {
                        a: 1,
                        b: 2
                    }
                },
                el: function () {   //不想让MyComponent 所有的实例将共享同一个 el 对象,所以将el写成函数形式返回
                    return ".lala"
                }
            })                    
            var myVue = new Vue({
                el: '.test',
                components: {
                    zujian:myComponent
                }
            })
        </script>
    </body>
</html>

Vue组件作用域(父子通信)

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--组件作用域</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- 子组件模板 -->
        <template id="child-template">
          {{msg1}}
        </template>
        
        <!-- 父组件模板 -->
        <div id="events-example">
          <p>Messages: {{ messages | json }}</p>
          <child :msg1="mssss">
              
          </child>
        </div>
        
        <script type="text/javascript">
            var parent = new Vue({
              el: '#events-example',
              data: {
                messages: '我是父框架222',
                mssss: 'ddddddd'
              },
              components: {
                  child: {
                      template: '#child-template',
                      props: {msg1: String }
                    }
              }
            })
        </script>
    </body>
</html>
请我喝杯果汁吧！