第一部分：Vue的组件基础

变量写到data中，而不是设为全局对象。否则会导致各组件耦合程度加深。组件本身相当于闭包。

反例：

var data = {counter:0}
data(){
    return data //在使用多个计算器按钮子组件时，避免互相之前影响数值变化。
}

第二部分：props(父组件传给子组件)

props写在子组件中，参数为父组件传入的参数。

*子组件 son.vue:*
//props:['xx']  //这个xx的值由父组件传入，在模板中使用可以为``
props:{xx:{
    type:String,
    default:'', //也可以是函数
    validator:function(value){
        return value>1
    }
}
}

父组件：
引入son.vue命名为son,模板中为
通过 v-bind:xx 实现动态更新参数xx的值，该值即传入子组件中。
注意：props支持驼峰命名，父组件中xx部分可化为短横线。
如果参数很多且属于同一体系中，可直接props接受一个对象作为参数。示例：
template中为modal.title等参数

 
props:['modalOption']
computed:{
    modal:{
        get(){
            let modal = this.modalOption;//此处接收父组件的参数并赋值给modal
            modal = {//再次赋值是为了初始化默认值，比如有的父组件未传参，直接取默认值就好
            title:modal.title,
            text:typeof modal.text==='String'?modal.text:'a'
            }
            return modal;//这样最终得到的参数兼具传参和默认值了
        }
    }
}

父组件：

data()….modaldata:{
title:’xx’,
text:’xx’
}

## 第三部分：自定义事件（子组件传给父组件）

 
*子组件*
<button @click="dothis"></button>
dothis(){
    this.$emit("dothis","data")//将data传到父组件后直接执行相应事件
}
*父组件*
<div @dothis="showdata"></div>
showdata(data){
console.log(data) //父组件中使用了子组件传过来的参数
}

常用的示例：
公共组件中既有自定义事件（用于将click等事件在父组件中设置），也有props用于父组件传参。比如todosX号按钮和todo的公共组件。

组件绑定原生事件：
正常DOM绑点：
组件绑定：

第四部分：slot的使用

子组件

xxx //this.$slots包括各个命名slot
父组件

content

h1的内容会覆盖slot中的xxx。适用于扩展性复用组件中的预留接口，比如按钮上写的字样，可供后续更改。
父组件中无内容则显示slot中的部分，有内容则替换slot中的部分。

第五部分：ref的使用

即子组件索引，仅作为访问子组件的应急方案。
父组件

 
<son ref="son"></son>
import son from 'son.vue'
methods:{
    x(){
        this.$refs.son.someMethod();//执行子组件son中的方法。this指的是当前vue实例。
    }
}

组件间方法传递。

第六部分：is的使用

is特性扩展为原生组件

 
<ul>
<li :is="son"></li>
</ul>

其中li实际为名为son的子组件。
配合keep-alive

 
<keep-alive>
<component :is='currentView'></component>//currentView可以设置为任意子组件，keep-alive保证切换出去的子组件仍然保留在内存中。
</keep-aliev>

第七部分：filters computed watch

过滤器&计算属性&监视器：
前者用于mustache绑定即双大括号，如{{ message|cap }}

 
filters:{
    cap(value){
        return value.split('');
    }//将message绑定的字符串转换为数组
}

后者用于指令中的绑定，
data中有message的值，对于{{reMes}}，反转message

 
computed:{//依赖缓存！！！如只要message不变，多次访问reMes也不变
reMes(){
    return this.message.split('').reverse().join('');//本质是属性reMes的getter
}
}

关于setter属性，类似反向解析，已知reMes得出其他结果。
watch:用于执行异步操作时，时刻监测异步执行的进度。如在输入时显示正在输入。

第八部分：指令解惑

v-if v-show：
前者满足条件才会渲染，用于运行环境不太可能更改的情况，如登录注册；
后者初始化时即渲染，用于频繁切换的场景，如下拉菜单（只是css切换，相当于display）
v-model:

 
<input v-model="input"></input>
data:{
    input:'' //输入值
}

语法糖，相当于v-bind:value=”input”和v-on:input=”input=$event.target.value”
v-for:
:key 用于VUE识别节点
key value index的灵活使用
v-once：表示只渲染一次，建议使用在纯静态界面，不会再次渲染耗时。如

vue学习-父子组件通信（一）