Vue小技巧

工程化

1. 全局安装vue-cli:npm install -g @vue-cli
2. 初始化一个vue-cli工程：vue create vueProjectNmae
3. 开始工程
   

组件化

1. 定义组件
2. 导入组件
3. 注册组件
4. 使用组件 template中只能有一个根组件。一般如下：

<template>
	<div>
	</div>	
</template>

状态管理

只能用mutations改变状态
事件提交mutations，mutations改变state，state驱动视图变化。
Vue.component("name",{})形式注册全局组件时，必须在Vue实例化之前执行。

@click.native.stop

Vue,组件上绑定事件需要加.native事件修饰符，可以用@click.stop阻止没有事件处理函数的事件冒泡。

sync修饰符使用

对一个 prop 进行“双向绑定”。官方文档

通过$listeners实现隔代组件通信

子组件中的$listeners属性包含了父组件传入子组件的事件监听(不包含.native修饰的)，子组件可通过v-on="$listeners"传入孙子组件，孙子组件通过this.$emit(事件名，参数)触发父组件或爷爷组件中的事件。

隔代组件通信方法汇总

1. vuex-状态管理
2. props-代代传
3. provide/inject-依赖注入
4. bus-中央事件总线
   

离线安装npm包

1. 在有线环境下下载npm包:

   npm install vue-scroller --global-style

   会把vue-scroller和它依赖的到打包到vue-scroller一个包中。

2. 离线环境下导入npm包：

   拷贝第一步打包好的npm包

   放入需要包项目的node-modules文件夹即可。

   不用修改package.json文件

vue深度作用域样式

在当前组件中强制修改子组件样式

# css中使用>>>
.box >>> .title{
    color:red;
}

# less/scss中使用 /deep/
.box{
    /deep/ .title{
        color:red;
    }
}

监听组件的生命周期

普通做法：

//Parent.vue
<Child @mounted='dosomething' />

//Child.vue
mounted(){
	this.$emit("mounted");
}

简单做法：

//Parent.vue
<Child @hook:mounted='doSomething' />

路由参数解耦

一般在组件内使用路由参数，大多数人会这么做：

export default{
    methods:{
        getParamsId(){
            return this.$route.params.id
        }
    }
}

这样做的缺点：高度耦合，使得该组件只能在某些特定的url上使用。

推荐的做法：

const router = new VueRouter({
    routes:[{
        path:'/user/:id',
        component:User,
        props:true, //核心
    }]
})

将路由的props属性设置为true后，组件内可通过props接收params参数

export default{
    props:['id'],
    methods:{
        getParamsId(){
            return this.id;
        }
    }
}

函数式组件

函数式组件是无状态，无任何生命周期和方法的组件，无法实例化。创建函数式组件很简单，只需在template上添加functional声明即可。渲染性能更高。

函数式组件需要的一些都通过context参数传递。 具体参阅 Vue函数式组件