Vue组件

gitHub地址:https://github.com/manlili/vue_learn里面lesson12

一创建组建的步骤

<!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>

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

<!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>

二 父子组件

<!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>

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

<!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组件选项

<!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组件作用域(父子通信)

<!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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lily1010/p/5884381.html