最近在看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版本,如果上面有什么问题还请指点一下。

Logo

前往低代码交流专区

更多推荐