vue起步(4)之组件

vue组件:组件主要是扩展了HTML元素,使dom元素更加灵活,慢慢深入会发现组件是vue构建项目所必备的。
全局组件:

    <div id="box">
      <aaa></aaa>
    </div>
    <script>
    //组件构造器
    var Aaa=Vue.extend({
        template:'<h3>我是标题3</h3>'
    })
    //注册组件
    Vue.component('aaa',Aaa);
        var vm=new Vue({
            data:{
              msg:'vue.js'
            },
            methods:{
            }
        }).$mount('#box');

    </script>
</body>```
局部组件:
```<body>
    <div id="box">
      <aaa></aaa>
    </div>
    <script>
    //组件构造器
    var Aaa=Vue.extend({
        template:'<h3>{{msg}}</h3>',
        data(){
            return {
                msg:'快捷快递'
            }
        }
    })
    //注册组件
   // Vue.component('aaa',Aaa);
        var vm=new Vue({
            data:{
              msg:'vue.js'
            },
            methods:{
            },
            components:{
                'aaa':Aaa
            }
        }).$mount('#box');

    </script>
</body>```
组件的另一种写法:
```<body>
    <div id="box">
      <aaa></aaa>
    </div>
    <script>
    Vue.component('aaa',{
        template:'<strong>就家电及啊</strong>'
    })
        var vm=new Vue({
            data:{
              msg:'vue.js'
            },
            methods:{
            },
           
        }).$mount('#box');
    </script>
</body>```
```body>
    <div id="box">
      <aaa></aaa>
    </div>
    <script>
    var Home={
                template:'<strong>aaa</strong>'
                }
        var vm=new Vue({
          components:{
                'aaa':Home
            }
           
        }).$mount('#box');
    </script>
</body>```
```<body>
    <div id="box">
      <aaa></aaa>
    </div>
    <script>
        var vm=new Vue({
          components:{
                'aaa':{
                    data:function(){
                        return {
                            msg:'vue.js'
                        }
                    },
                    methods:{
                         change:function(){
                            this.msg='aaaaaa'
                        }
                    },
                    template:'<strong @click="change">{{msg}}</strong>'
                }
            }
           
        }).$mount('#box');
    </script>
</body>```
组件模板:
```<body>
    <div id="box">
      <aaa></aaa>
    </div>
    <template id="aaa">
        <strong @click="change">{{msg}}</strong>
    </template>
    <script>
 
        var vm=new Vue({
          components:{
                'aaa':{
                    data:function(){
                        return {
                            msg:'vue.js'
                        }
                    },
                    methods:{
                         change:function(){
                            this.msg='aaaaaa'
                        }            
                    },
                    template:'#aaa'
                }
            }           
        }).$mount('#box');
    </script>
</body>```
动态组件:
```<body>
    <div id="box">
       <aaa></aaa>
    </div>
    <template id="parent">
        <div><!-- 必须有根元素包裹 -->
            <h2>我是父组件</h2>
            <strong>aaa</strong>
            <bbb></bbb>
        </div>
    </template>
    <template id="child">
        <div><!-- 必须有根元素包裹 -->
            <h2>我是子组件</h2>
            <strong>bbb</strong>
        </div>
    </template>
    <script>
    var child={
        template:'#child'
    }
    var parent={
        template:'#parent',
        components:{
            'bbb':child
        }
    }
        var vm=new Vue({
            data:{
                a:'aaa'
            },
          components:{
                'aaa':parent
                
            } 
        }).$mount('#box');
    </script>
</body>```
这里说的是和1.0不同2.0版本必须有根元素div包裹。否则会报错。
父子组件的数据传递通过props作为桥梁来传递数据:
```<body>
    <div id="box">
       <aaa></aaa>
    </div>
    <template id="parent">
        <div><!-- 必须有根元素包裹 -->
            <h2>我是父组件</h2>
            <strong>{{msg1}}</strong>
            <bbb :getp="msg1"></bbb>
        </div>
    </template>
    <template id="child">
        <div><!-- 必须有根元素包裹 -->
            <h2>我是子组件</h2>
            <strong>{{msg2}}</strong>
           获取父组件的数据-->{{getp}}
        </div>
    </template>
    <script>
    var child={
        data:function(){
            return {
                msg2:'我是子组件的数据'
            }
        },
         props:['getp'],//通过props声明自己要的数据 这是一个桥梁
        template:'#child'
    }
    var parent={
          data:function(){
            return {
                msg1:'我是父组件的数据'
            }
        },
        template:'#parent',
        components:{
            'bbb':child
        }
    }
        var vm=new Vue({
            data:{
                a:'aaa'
            },
          components:{
                'aaa':parent,     
            } 
        }).$mount('#box');
    </script>
</body>```
父子组件之间的数据变化:有些情况下我们非要想让父组件的数据和自组件同步变化,实现同时变化,vue1.0版本有sync方法,但是在vue2.0中被移除,官方说他会破坏单向数据流,那么就这样做:
1)父组件要传一个对象给子组件也就是json形式
2)用mounted方法中转
```<body>
    <div id="box">
       <aaa></aaa>
    </div>
    <template id="parent">
        <div><!-- 必须有根元素包裹 -->
            <h2>我是父组件</h2>
            <strong>{{msg1.a}}</strong>
            <bbb :getp="msg1"></bbb>
        </div>
    </template>
    <template id="child">
        <div><!-- 必须有根元素包裹 -->
            <h2>我是子组件</h2>
            <strong>{{msg2}}</strong>
            <input type="button" value="按钮" @click="change"/> 
           获取父组件的数据-->{{getp.a}}
        </div>
    </template>
    <script>
    var child={
        data:function(){
            return {
                msg2:'我是子组件的数据'
            }
        }, 
        mounted:function(){
            this.msg1=this.getp.a;
        },
       methods:{
            change:function(){
            this.getp.a='1111'
        }
       }, 
         props:['getp'],//通过props声明自己要的数据 这是一个桥梁
        template:'#child'
    }
    var parent={
          data:function(){
            return {
                msg1:{
                    a:'我是父组件的数据'
                }
            }
        },
        template:'#parent',
        components:{
            'bbb':child
        }
    }
        var vm=new Vue({
            data:{
                a:'aaa'
            },
          components:{
                'aaa':parent,    
            } 
        }).$mount('#box');
    </script>
</body>```

推荐阅读更多精彩内容