本文转载自 飞歌Fly、caik13、墨飞_Max

原文地址:https://blog.csdn.net/qq_35430000/article/details/79291287、https://www.cnblogs.com/caik13/p/6896890.html、https://www.cnblogs.com/mophy/p/8590291.html

 

一、通过路由带参数进行传值

①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

②在B组件中获取A组件传递过来的参数

this.$route.query.orderId

 

二、通过设置 Session Storage缓存的形式进行传递

①两个组件A和B，在A组件中设置缓存orderData

1. const orderData = { 'orderId': 123, 'price': 88 }

2.  

3. sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

 

②B组件就可以获取在A中设置的缓存了

const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

此时 dataB 就是数据 orderData

朋友们可以百度下 Session Storage（程序退出销毁） 和 Local Storage（长期保存） 的区别。

三、父子组件之间的传值

（一）父组件往子组件传值props

1、定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多，推荐使用json数组{}的形式

父组件(向子组件传递了两个参数‘para_head’和‘title’)：

<template>
	<div>
		<my-heade :para_head="para_head" :title="'首页'"></my-heade>
	</div>
</template>

<script>
import myHeade from '../components/myHeade';
export default{
        name : 'home',
        components:{
            myHeade,
        },
        data : ()=>({
            
        }),
        methods:{
        	
}
</script>

子组件：

props: {
            para_head:{
            	type:[String,Number],//传入的值的类型
            	default:'no_btn'//默认值
            },
            title:{
            	type:[String,Number],
            	default:'首页'
            }
        },

2、假如接收的参数 是动态的，比如 input输入的内容 v-model的形式

注意：父子组件传值，数据是异步请求，有可能数据渲染时报错

原因：异步请求时，数据还没有获取到但是此时已经渲染节点了

解决方案：可以在 父组件需要传递数据的节点加上  v-if = false，异步请求获取数据后，v-if = true

（二）、子组件往父组件传值，通过emit事件

子组件：

<template>
    <div @click="emit('success')">按钮</div>
</template>

methods:{
    emit(para){
		if(para=='close'){
			let json_data={
				type:'close_active_signup',
				data:''
			};
			this.$emit('child_para',json_data);
		}else if(para=='success'){
			let json_data={
			    type:'form_success',
                            data:''
			};
		    this.$emit('child_para',json_data);
                }
    },
}

父组件：

<template>
    <activeSignup @child_para="get_child_para" />
</template>
<script>
    import activeSignup from './active_signup';
    export default {
        components:{
            activeSignup
        },
        methods:{
            //获取子组件参数
            get_child_para(para){
            	if(para.type=='close_active_signup'){
            		this.is_show_signup=false;
            	}else if(para.type=='show_active_form'){
            		this.is_show_signup=true;
            	}
            },
        }
    }
</script>

 

四、不同组件之间传值，通过eventBus（小项目少页面用eventBus，大项目多页面使用 vuex）

①定义一个新的vue实例专门用于传递数据，并导出

②定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件

③接收传递过来的数据

注意：enentBus是一个另一个新的Vue实例，区分两个this所代表得vue实例

五、vuex进行传值

敬请期待

六、父组件调用子组件方法或传值

子组件：

<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件：

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

七：子组件调用父组件方法

使用上文this.$emit方法，也可以使用this.onsubmit方法：

子组件：

<template>
    <button @click="submit">提交</button>
</template>
<script>
export default {
  props: {
    onsubmit: {
      type: Function,
      default: null
    }
  },
  methods: {
    submit: function () {
      if (this.onsubmit) {
        this.onsubmit(‘cc12345’)
      }
    }
  }
}
</script>

父组件：

<template>
    <editor id="editor" class="editor" :onsubmit="cc"></editor>
</template>
<script>
export default {
  methods: {
    cc: function (str) {
      alert(str)
    }
  }
}
</script>