简略总结一下VUE中页面与组件传值的几种方式

最近在看vue,发现vue这个世界组件与组件之间，页面与页面之间交互的方式真的是多种多样，可谓条条大路通罗马，除去VUEX外，我总结了目前我接触到的能够完成页面与页面间，个人总结的组件与组件之间传值的四种方式（因为刚开始学习VUE，有很多方式还没有学习到，尤其是VUEX这个大佬），个人感觉对于初学者刚入手VUE还是能稍微看一看：

1.prop传值，简单粗暴的传值方式

针对props,我相信大家对他并不陌生，当然props也是组件之间传值交互的最直接，最常用的一种方式：用法如下：

父组件：

<Parent :todos="todos"></Parent>

子组件中使用props来接受父组件传入的值

<template>
   <ul>
      <li v-for="item in todos">{{item}}</li>
   </ul>
</template>

<script>
  export default {
     name : "child",
     props : ["todos"],    //  todos需与父组件中:todos名称一致
  }
</script>

第二种方式：使用$emit传值

  这种方式，主要是借助于$emit触发组件内部的方法，然后将数据传递到组件方法中实现传值,在父组件中将一个方法绑定到子组件中，然后通过点击子组件中的元素触发父组件中的事件完成传值。

   父组件：

  

<template>
<Child @letHaveTry="lookMe"></Child>
</template>
<script>
   export default {
      name : "parent",
      methods : {
         lookMe : function(e){
           console.log("就这么传过来" + e) 
        }
      }
   }
</script>

   子组件：

  

<template>
   <button @click="haveTry">敢点击我我就敢甩锅。</button>
</template>
<script>
    export default {
     name : "child",
     methods : {
       haveTry : function(){
          this.$emit("letHaveTry","把想传的值放在这")
      }
   }
 }
</script>

第三种方式：使用slot-scopt 插槽作用域将子组件的值“传”给父组件

其实使用solt-scope传值显得有点大材小用了，slot-scope也只能是"传"值，为什么加引号呢，是因为slot-scope作为作用域插槽，它的作用可大了去了，它主要用于子组件的封装，父组件将数据通过props的方式传入封装的子组件中，但是如果父组件需要使用封装以后的数据该怎么去实现呢，别担心,一个slot-scope问题解决。

父组件：

<template>
  <child_slot :todos = "todos">
       <template slot-scope="child">   <!-- 这个child则是我们需要使用的子组件实例了 -->
           <div>{{child.todo.name}}</div>   <!-- 这个todo为我们在子组件中为插槽绑定的作用域 -->
       </template>
  </child_slot>
</template>
<script>
   export default {
     name : "parent",
     data(){
       return  {
         todos : [{name : "java"},{name : "ios"}]
      }
   }
}


</script>

子组件中：

<template>
   <div>
    <template v-for="todo in todos">
      <slot :todo = "todo"></slot>   <!-- 这个todo则我们为了对应父组件所声明的作用域实例了 -->
    </template>
  </div>
</template>
<script>
   export default {
      name : "child",
      props : ["todos"],
  }
</script>

第四种方式：在使用vue-router的时候进行组件之间的传值

这种方式的实现原理呢，是借助$router实例的push方法在实现页面跳转的同时进行传值，有两种方式：

A组件：

// 页面传参 ： 1. 使用 name结合params 来传参    2.使用 path和query 来传参
// this.$router.push({path: '/storeInfo', query: {name: name, price: price}})
this.$router.push({name: '商品详情', params: {name: name, price: price}})

B组件：

//  接受参数的方式
//  使用path 和 query 接收参数   this.$route.query.num
//  使用name 和 params 传收参数   this.$route.params.num

目前处于VUE学习阶段，vuex传参的话我还没有学习到，以上纯属个人理解与实践过的，基于VUE2.0版本，如果上面有什么问题还请指点一下。