Vue中的八种传参方式你了解多少!
一.父传子,子传父父传递子如何传递:(1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量(2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:[“属性名”]props:{属性名:数据类型}子传递父如何传递...
一.父传子,子传父
父传递子如何传递:
- (1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量
- (2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型}
子传递父如何传递
- (1)在父组件的子组件标签上自定义一个事件,然后调用需要的方法
- (2)在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件,数据是以参数的形式进行传递的
父组件代码
<template>
<div id="Parent">
<Child :ChildData="ParentData" @alter="alter"></Child>
</div>
</template>
<script>
import Child from "../views/Child";
export default {
components: { Child },
data() {
return {
ParentData: "我是父组件中一段文字"
};
},
methods: {
alter(title) {
this.ParentData = title;
}
}
};
</script>
<style lang="scss" scoped>
#Parent {
width: 100%;
height: 100%;
}
</style>
子组件代码
<template>
<div>
<h2>{{ChildData}}</h2>
<button @click="alter">点击更改,子组件触发父组件</button>
</div>
</template>
<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: ["ChildData"], //我把父组件的文字给传到子组件中去了
data() {
//这里存放数据
return {};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
alter() {
var data =
"在子组件的方法中通过 this.$emit('事件')来触发在父组件中定义的事件,数据是以参数的形式进行传递的";
this.$emit("alter", data);
}
},
}
</script>
<style lang='scss' scoped>
</style>
实现效果如图下
vuex中state传值
state 所有的数据都存储在state中 state是一个对象
state组件中的代码
<template>
<div>
<h3 v-for="item in stateData" :key="item.id">{{item.id}}:{{item.title}}</h3>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {};
},
//计算属性 类似于data概念
computed: {
...mapState(["stateData"])
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {}
};
</script>
<style lang='scss' scoped>
</style>
vuex中state的代码(store.js中)
state: {
stateData:[
{id:1,title:"我是vuex中来存储数据的"},
{id:2,title:"所有的数据都存储在state中 state是一个对象"},
{id:3,title:" Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据"},
{id:4,title:"在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex"}
]
},
效果如下图
三.sessionStorage,localStorage传值
存储数据
- 采用setItem()方法存储
存储到本地的数据如下图
读取数据
- 通过getItem()方法取值
<template>
<div>
<h2>{{this.localStorage}}</h2>
<h2>{{this.sessionStorage}}</h2>
</div>
</template>
<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
// localStorage, sessionStorage
localStorage:"",
sessionStorage:"",
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
mounted() {
var obj = {
username: "康康",
Email: "3368327138@qq.com"
}
var obj2 = {
username:"小康康",
phone:"不告诉你"
}
localStorage.setItem("localStorage",JSON.stringify(obj))
sessionStorage.setItem("sessionStorage",JSON.stringify(obj2))
this.localStorage=JSON.parse(localStorage.getItem('localStorage'))
this.sessionStorage=JSON.parse(sessionStorage.getItem("sessionStorage"))
}
};
</script>
<style lang='scss' scoped>
</style>
效果实现
四.Promise来传值
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,promise 是一个对象,从它可以获取异步操作的的最终状态(成功或失败)。
Promise是一个构造函数,对外提供统一的 API,自己身上有all、reject、resolve等方法,原型上有then、catch等方法。
Promise组件代码
<template>
<div>
<!-- 自己模拟一段json数据放在api中 -->
<h2 v-for="item in promiseData" :key="item.id">
{{item.id}}:{{item.title}}
</h2>
</div>
</template>
<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
promiseData:[]
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
this.$http
.get("/api/promise.json")
.then(res => {
console.log(res);
this.promiseData=res.data
})
.catch(err=>{
console.log(err);
});
}
};
</script>
<style lang='scss' scoped>
</style>
自己模拟promise.json数据
[
{
"id": "1",
"title": "Promise"
},
{
"id": 2,
"title": "我即将通过promise来被获取到"
},
{
"id": 3,
"title": "我能被通过异步操作来获取成功状态或者失败状态"
},
{
"id": 4,
"title": "我的初始状态时pending,成功状态是fulfilled ,失败状态是rejected "
}
]
效果如下图
五.路由传参
先有如下场景 点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去
<div @click="insurance('我是通过路由传参获取到的值')">查看详情</div>
点击查看详情跳转到页面route
// 路由传参 点击查看详情跳转到页面route
insurance(title){
this.$router.push("/route?title="+title)
}
在router当中配置路由如下
{
path:"/route",
name:"router传值",
component: () => import('../views/router.vue'),
}
在详情页面通过this.$route.query.title来获取传过来的值
<template>
<div>{{title}}</div>
</template>
<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
title: ""
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
var title = this.$route.query.title;
console.log(title);
this.title = title;
}
};
</script>
<style lang='scss' scoped>
</style>
效果如下
六.eventbus,组件之间的传参
(1)在src中新建一个Bus.js的文件,然后导出一个空的vue实例
import Vue from 'vue'
export default new Vue({})
举例说明
(2)在传输数据的一方引入Bus.js 然后通过Bus. e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 , 数 据 是 以 emit(“事件名”,"参数")来来派发事件,数据是以 emit(“事件名”,"参数")来来派发事件,数据是以emit()的参数形式来传递
state组件是传输数据的一方
<template>
<div>
<h3 v-for="item in stateData" :key="item.id">{{item.id}}:{{item.title}}</h3>
<button @click="bus">BUS,点我会进行兄弟间通信</button>
</div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "../Bus"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
busData:"我是兄弟间的交流的纽带"
};
},
//计算属性 类似于data概念
computed: {
...mapState(["stateData"])
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
bus(){
Bus.$emit("bus",this.busData)
}
}
};
</script>
<style lang='scss' scoped>
</style>
看图在原有代码上添加
(3)在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
created(){
Bus.$on('bus',(data)=>{
console.log(data);
})
}
7.全局变量使用与传值
1.创建全局文件
2.main.js中引入
3.直接在组件中使用
<template>
<div>
<h2>{{this.Global.title}}</h2>
</div>
</template>
<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
console.log(this.Global);
//
}
};
</script>
<style lang='scss' scoped>
</style>
效果图如下
八.this.$refs的使用与传值
1.给组件加ref
2.可以通过
r
e
f
s
得
到
组
件
,
进
而
调
用
组
件
的
变
量
和
方
法
,
如
t
h
i
s
.
refs 得到组件,进而调用组件的变量和方法,如 this.
refs得到组件,进而调用组件的变量和方法,如this.refs.comp.$el得到了组件中的所有元素
打印出来的信息如下图
九. $parent 和 $children
1、ref为子组件指定一个索引名称,通过索引来操作子组件;
2、this. $parent可以直接访问该组件的父实例或组件;
3、父组件也可以通过this.$children 访问它所有的子组件; 需要注意 $children 并不保证顺序,也不是响应式的。
讲到这里终于结束了,这次的博客之旅也让我自己学到了很多知识,愿屏幕前努力的奋斗的你从中能收获多多,完结撒花!!!
更多推荐
所有评论(0)