在这个前端不断工程化的时代,组件之间的通信已经成为我们工作当中不可缺的一部分
组件传参呢也给我们带来不少好处: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能
2.页面会简洁一些,更方便管控
接下来我给大家总结几种传参方式
1.父传子
首先在页面当创建两个组件,一个为父组件,一个为子组件
第二步:将子组件挂载到父组件当中去,并进行注册
<template>
<div>
<Som></Som>
</div>
</template>
<script>
//将子组件挂在到父组件当中去
import Som from '@/components/son.vue'
export default {
//注册组件
components:{
Som
},
data() {
return {
}
}
}
</script>
<style>
</style>
在子组件里面写个内容
看看页面展示
效果没有问题,内容可以正常显示
那我们主要做的是将父传子的方法进行一个实现,那父传子就是在父组件的子组件上面绑定一个属性,将父组件里面的内容传给子组件,子组件呢通过props进行接受,废话不多说,上代码
子组件通过props进行接受,并在页面上进行输出
效果如下
父传子呢就是这样的一个过程,里面最主要的是子组件通过props来进行接收
2.子传父
子传父方法就是在父组件的子组件中绑定一个事件,子组件通过this.$emit方法来触发父组件当中的事件
上代码
子组件
父组件
效果图如下
3.兄弟组件传参
非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果
导出一个空的vue实例
组件A
组件B
4.Vuex传参
vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手,他的作用是将应用中的所有状态都放在一起,集中式来管理
首先在Store里面创建个index.js
在vuex里面有五个核心状态
state:存储数据的地方,它是一个对象
mutation:可以直接调用state里面的数据
action:调用mutation里面的方法进行异步操作
getters:类似于计算属性,对数据做一些逻辑性操作
module:将仓库分模块处理
上代码
调用
template>
<div>
<!-- 调用 -->
<span> {{this.$store.state.counter}}</span>
</div>
</template>
5.全局变量
利用全局变量进行传参
在main.js里面进行一下全局注册
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
//注册全局组件
import Commpont from '@/components/commpont.vue'
Vue.component(Commpont.name, Commpont)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
那么在这个组件里面name属性上进行一个绑定
<template>
<div>
啦啦啦
</div>
</template>
<script>
export default{
name:'Commpont',
data(){
return{
}
}
}
</script>
<style>
</style>
在需要调用的页面进行调用
<template>
<div>
<Commpont></Commpont>
</div>
</template>
这样就可以显示内容啦
6.$parent传值
父组件
<template>
<div>
<h1>父组件</h1>
<h-child></h-child>
</div>
</template>
<script>
// 引入子组件
import HChild from './Child'
export default {
name: 'Parent',
components: {
HChild
},
data () {
return {
msg: 'data from parent'
}
},
methods: {
fun () {
console.log('parent fun')
}
}
}
</script>
子组件
<template>
<div>
<h1>子组件</h1>
<button @click="showParent">调用父组件的数据和方法</button>
</div>
</template>
<script>
export default {
name: 'Child',
methods: {
showParent () {
// 获取到所有的子组件
console.log(this.$parent)
// 获取指定子组件中的指定数据
console.log(this.$parent.msg)
// 调用子组件的方法
this.$parent.fun()
}
}
}
</script>
7.sessionStorage传值
1.读取数据
采用setItem()方法存储
sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
通过属性方式存储
sessionStorage['testKey'] = '这是一个测试的value值';
2.读取数据
通过getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey对应的值
通过属性方式取值
sessionStorage['testKey']; // => 这是一个测试的value值
3.存取对象
sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。
var userEntity = {
name: 'tom',
age: 22
};
// 存储值:将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时:把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
8.路由传值
对应的路由配置模块
<div class="examine" @click="insurance(2)">查看详情</div>
使用方法
methods:{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}
配对路由
{
path: '/particulars/:id',
name: 'particulars',
component: particulars
}
利用params接收
this.$route.params.id
9.promise传参
let fn = new Promise((resolve, reject) => {
setTimeout(() => {
reject("ok");
}, 1000);
});
fn.then().catch(console.log); // 方式一
fn.then(console.log, console.log); // 方式二