Vue组件传值方式

在这个前端不断工程化的时代,组件之间的通信已经成为我们工作当中不可缺的一部分
组件传参呢也给我们带来不少好处: 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);  // 方式二