Vue+Webpack开发可复用的单页面富应用教程（组件篇）

2017-01-23 本文已影响1263人 Lusia_

资源地址：
https://www.talkingcoder.com/article/6310724958473489215

一、单页面富应用（SPA）和路由

何为SPA：
在前后端分离的基础上再加一层前端路由
前端路由：
由前端来维护一个路由规则。
实现方式2种：
1、利用url的锚点 #
2、html5的history模式

二、编写可复用的代码、模块化、组件

把一个页面分成不同的模块，再组装。
模块化 是一种开发模式，组件就是这种模式的具体实现。
代码复用 ：不同项目，不同文件，不同人员都可以使用

三、vue的路由和它的组件化

常见:vue.js+vue-router+webpack

1、组件的构造

vue组件特点：可插拔、独立作用域、观察者模式、完整生命周期

Vue.component( 'child',{ //child为组件的名称
    props: ['msg'],  //从父级通过html特性传递过来的数据，它可以是字符串、数字、布尔、数组、对象，默认是单向的，也可以设置为双向绑定的。props里的参数可以直接通过像this.msg这种方式调用，这与data的里的数据是一样的。
    template: '<span>{{msg}}</span>',  //组件使用的html片段，可以直接是字符串，也可以像'#child'这样标识一个dom节点
    data: function(){
      return  {
        title: 'libra'
      },
    methods: {},
    ready:function() {},  //在组件准备好时的一个回调，一般在这里我们可以使用获取数据、实例化第三方组件、绑定事件等
    beforeDestroy: function() {},//在组件即将被销毁时触发回调，在这里进行销毁自定义的实例、解绑自定义事件、定时器等。
    events:{}
 });

组件格式类似于vue实例，有methods和data，区别就是组件的data通过function返回一个对象。

2、如何使用组件

组件一般由他的父级来显示调用的

<child :msg="msg1"></child>
<child :msg.sync="msg2"></child>
new Vue({
    data: {
        msg1: 'Hello',
        msg2: '你好'
    }
})

上例使用了两次child组件，使用props传递了一个参数msg，并第二个组件的参数是双向绑定的，在双向绑定后，无论修改父级还是子元素的msg，双方的数据和view都会响应到，而单向绑定后，子组件修改是不会影响到父级的。

在渲染完，<child>的内容就会替换为组件template内的字符串了，虽然使用的是同一个child组件，但是两次使用的作用域是独立的，这也是为什么在组件内data要使用function来返回一个对象的原因。

3、父子组件间的通信

在vue中，父子之间的通信主要通过事件来完成，这就是观察者模式。父组件通过Vue内置的$broadcast()向下广播事件和传递数据，子组件通过$dispatch()向上派发事件和传递数据，双方都可以在events对象内接收自定义事件，并且处理各自的业务逻辑。
使用v-ref来标识组件

<child :msg="msg1" v-ref:child1></child>
<child :msg.sync="msg2" v-ref:child2></child>
new Vue({
    data: {
        msg1: 'Hello，TalkingCoder',
        msg2: '你好，TalkingCoder'
    },
    methods: {
        sendData: function() {
            this.$refs.child1.$emit('set-data', {});
            this.$refs.child2.$emit('set-data', {});
        }
    }
})
通过$refs就可以给指定的组件触发事件了，事实上，通过$refs是可以获取到子组件的整个实例的。

<child :msg="msg1" v-ref:child1 @child-event="handler1"></child>
<child :msg.sync="msg2" v-ref:child2 @child-event="handler2"></child>
new Vue({
    data: {
        msg1: 'Hello，TalkingCoder',
        msg2: '你好，TalkingCoder'
    },
    methods: {
        sendData: function() {
            this.$refs.child1.$emit('set-data', {});
            this.$refs.child2.$emit('set-data', {});
        },
        handler1: function() {
            // ...
        },
        handler2: function() {
            // ...
        }
    }
})
//@xxx或v-bind:xxx绑定自定义事件

4、内容分发slot

使用slot来分发自定义的内容

Paste_Image.png

<div>
    <h1>提示</h1>
    <slot name="content"></slot>
    <span>确定</span>
    <span>取消</span>
</div>
//父组件调用子组件：
<confirm>
    <p slot="content">欢迎来到TalkingCoder</p>
</confirm>
//最终渲染完的内容为：
<div>
    <h1>提示</h1>
    <p>欢迎来到TalkingCoder</p>
    <span>确定</span>
    <span>取消</span>
</div>

5、编写可复用组件

可复用组件要定义一个清晰的公开接口
vue组件API：

prop 允许外部环境传递数据给组件
事件允许组件触发外部环境的action
slot 允许外部环境插入内容到组件的视图结构内

<my-component  :foo="baz" :bar="qux" @event-a="doThis"  @event-b="doThat">
  <img slot="icon" src="">
  <p slot="main-text">Hello!</p>
</my-component>

6、路由、组件和组件化

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Env from './config/env';
Vue.use(VueRouter); //安装路由模块
// 开启debug模式
Vue.config.debug = true;
// 路由配置
var router = new VueRouter({
    history: Env != 'production'
});
//设置路由匹配规则
router.map({
    '/index': {    //匹配127.0.0.1:8080/index
        name: 'index',
        component: function (resolve) {
            //在component的回调里使用require（）异步按需加载
            require(['./routers/index.vue'], resolve);
        }
    }
});
//vue-router还有一些钩子函数，通俗就是在发生一次路由时某个状态的一些回调，如下
router.beforeEach(function () {   //路由切换开始时调用
    window.scrollTo(0, 0);
});
router.afterEach(function (transition) {  //路由成功切换到激活状态时调用，一般写一些自动导航或自动面包屑的全局工作
console.log(transition);
});
router.redirect({    //重定向
    '*': "/index"   //找不到路由时可以跳转到指定路由
});
router.start(App, '#app');  //app.vue组件挂载到#app内

main,js文件，是项目跑起来后第一个执行的js文件。
vue-router支持匹配带参数的路由，比如'/user/:id'可以匹配到'/user/123'，或者'/user/any/bar'可以匹配到'/user/a/b/bar'，:id是参数，any是全匹配，
路径跳转

<a v-link="{path: '/index'}">首页</a>
<!--或者其他标签页可以-->
<p v-link="{path: '/index'}">首页</p>
//在js中跳转：
module.exports = {
    data: function() {return {} },
    methods: {
        go: function() {
            console.log(this.$route);//得到当前路由状态信息
            console.log(this.$router); //
            this.$router.go('/index');
        }
    }
}