Vue进阶系列之组件

Vue进阶之组件

创建并注册组件

- 全局创建注册`Vue.component(tagName, options);`- 局部创建注册```    new Vue({        components: {            // <my-component> 将只在父模板可用            'my-component':'<h1>hellow world</h1>'        }    })```

动态组件

通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换  ```    var vm = new Vue({        el: '#example',        data: {            currentView: 'home'        },        components: {            home: { /* ... */ },            posts: { /* ... */ },            archive: { /* ... */ }        }    })``````    <component v-bind:is="currentView">    </component>    //通过控制currentView来控制展示哪个组件```

组件通信 （父子组件与非父子组件）

- 父子通信 父子组件的通信，主要是靠Prop  ```    Vue.component('child', {        // 在子组件用父组件传进来的参数，需要声明 props        props: ['message'],        template: '<span>{{ message }}</span>'    })    <child message="by father"></child>```若是需要父组件改变状态，子组件跟着变动，就需要v-bind,```    <child :message="by father"></child>```若是子组件想传递数据给父组件，可以:  ```    Vue.component('child', {        data:function(){            return {                name:'child'            }        },        template: '<span @click="child">{{ name }}</span>',        methods:{            child:function(){                this.$emit('child',{name:'child'})            }        }    })    new Vue({        el: '#app',        data: {            name:'father'        },        methods: {            fatherSay: function (data) {                alert(data.name);//'child'            }        }    })    <child @child="fatherSay"></child>```- 非父子组件```var message = new Vue();//在组件内bus.$emit('hellow', 'eric')// 在组件 B 创建的钩子中监听事件bus.$on('hellow', function (id) {    // ...})//注意，$on 事件写在mounted里面。```

单文件组件（.vue）

运用webPack 可以写.vue文件，里面有html,js,css.一个单文件组件。```    <template>        <h1>hellow component</h1>    </template>    <script>        export default{            name:'app',            data () {                return {                }            }        }    </script>    <style scoped>    </style>```

异步组件

在比较大型的应用中，打包成一个整个文件，会导致build.js文件过于太大。  我们可以用vue的异步组件，加webpack的code solit 功能，把build.js分成0.build.js,1.build.js.... 在页面运用当前组件的时候，才进行加载。避免了第一次登陆，加载时间过长的问题。  在写路由文件的时候:  ```    const index = require('./views/index.vue')//普通组件    const index = resolve => require(['./views/index.vue'], resolve)//异步加载组件```