简略总结一下VUE中页面与组件传值的几种方式
最近在看vue,发现vue这个世界组件与组件之间,页面与页面之间交互的方式真的是多种多样,可谓条条大路通罗马,除去VUEX外,我总结了目前我接触到的能够完成页面与页面间,个人总结的组件与组件之间传值的四种方式(因为刚开始学习VUE,有很多方式还没有学习到,尤其是VUEX这个大佬),个人感觉对于初学者刚入手VUE还是能稍微看一看:1.prop传值,简单粗暴的传值方式针对props,我相信大家...
最近在看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版本,如果上面有什么问题还请指点一下。
更多推荐
所有评论(0)