Vue必备（marksheng）

1.插槽

匿名插槽：子组件<slot><slot>      父组件<child>今天天气阳光明媚<child>

具名插槽：子组件<slot name="footer"><slot>        父组件<child>   <template>    <p>今天天气挺好<p>     <template>   <child>

作用域插槽:

子组件<slot :nickName="'Tusi'"></slot>

父组件 <slot-child>
            <template slot-scope="scope">
                <div>{ {scope.nickName}}</div>
            </template>
        </slot-child>
 

2.封装组件

首先，使用Vue.extend()创建一个组件

然后，使用Vue.component()方法注册组件

接着，如果子组件需要数据，可以在props中接受定义

最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

3.vue六种传值方式（属性传值、$refs、$parent、通知传值(广播传值)、本地传值、路由传值）

在介绍组件传值之前先明确三种组件关系：父子组件、兄弟组件、表兄弟组件（a1,a2,a3 | a1和a3）、无关系组件(a,b)

1.属性传值：父传子

可传值类型：固定值   绑定属性    方法   本类对象

父：<htitle :bindMsg="msg" :run="run" :fatherThis="this"></htitle>

子：

props:{

     'mess':String,

     'bindMsg':[String, Number],

     'run':Function,

     'fatherThis':Object,

}

可传值类型：属性   方法 

2.$refs：子传父与vue获取元素ref="dataNum"（this.$refs.dataNum.dataset.num）

父：<v-fgsheader ref="header"></v-fgsheader>       使用：this.$refs.header.msg

this.$refs.header.属性
this.$refs.header.方法

子：data(){  return{  msg:"我是子组件header的值哟"  }      }

vue获取元素：

<span data-num="21" ref="dataNum" @click="getData">55</span>

this.$refs.dataNum.dataset.num

3.$parent:父传子

可传值类型：属性   方法 

直接在子组件中使用this.$parent.XX，不需要做任何多余操作

子 ：getFatherProp(){

          alert(this.$parent.fatherMsg);

},

4.兄弟传兄弟————通知传值(广播传值)

只传基本数据类型，不能传方法。

传输：通过 bus.$emit('名称','数据')传播数据

接收：bus.$on('名称',function(){})

示例：example

定义bus.js文件：import Vue from 'vue'       var bus= new Vue();        export default bus;

然后引入：import vueEvents from '../Model/vueEvent.js'

5.本地传值（ localStorage和vuex都是本地存储）

本地传值方式对于Vue而言有两种，一种是JS的localStorage，另一种Vuex。

1. localStorage

存:

localStorage.setItem('tolist',JSON.stringify(this.tolist));
取：

var tolist = JSON.parse(localStorage.getItem('tolist'));

2. Vuex
使用数据： this.\$store.state.count
调用方法： this.$store.commit('incCount');

 1.定义存储数据  var state = { count:1,}

     2. //类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
     var getterfl={
              completedCountChange(state){
              return state.count * 2 +'位';
            }
      }

      3.Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作

var actionfl = {
  asynIncCount(context){  
//因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
      context.commit('incCount');
  }
}

6.路由传值（this.$router.push）

1.父组件push使用this.$router.push
2.在子组件中获取参数的时候是this.$route.params

1.动态路由传值

   1.1 配置动态路由
      routes:[
         //动态路由参数  以冒号开头
         {path:'/user/:id',conponent:User}
       ]
 
   1.2 传值
     第一种写法 :  <router-link :to="'/user/'+item.id">传值</router-link>
     第二种写法 : goToUser(id) {
                    this.$router.push( {path:'/user/'+id});
                  }
   1.3 在对应页面取值
       this.$route.params;  //结果:{id:123}

2. Get传值(类似HTMLGet传值）

 2.1 配置路由
     const routes = [{path:'/user',component:User},]
 2.2 传值  
     第一种写法 : <router-link :to="'/user/?id='+item.id">传值</router-link>
     第二种写法 : goToUser(id) {
                        //'user' 是路径名称
                      this.$router.push({path:'user',query:{ID:id}});
                  }
 2.3 在对应页面取值
     this.$route.query;  //结果 {id:123}

3. 命名路由push传值

3.1 配置路由
   const routes = [{path:'/user',name: 'User',component:User},]
3.2 传值  
        goToUser(id) {
                //'User' 是路径重命名
              this.$router.push({name:'User',params:{ID:id}});
           }
3.3 在对应页面取值
       this.$route.params;  //结果:{id:123}