1.通过路由带参数传参

在两个组件A和B之间，A通过query把name传递给B，可以通过点击事件、钩子函数等触发。
this.$route.push({ path: '/componentsB' , query: { name: 123 } } )
在B中获取从A中传递过来的参数
this.$route.query.name

2.父子组组件传参

1.父组件向子组件传值props

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

<template>
  <div class="parent">
    <children number=666></children>
  </div>
</template>

<script>
import Children from  'components/children'
export default {
  component:  Children
}
</script>

2.定义子组件，子组件通过props方法获取父子件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。

<template>
  <div class="children">
    {{  number  }}
  </div>
</template>

<script>
export default {
  props: {
    'number': [Number,String,Object],
    'string': [String]
  }
}
</script>

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

注意：传递的参数名称不识别驼峰命名，推荐使用横杠-命名。

<template>
  <div class="parent">
    <input type="text" v-model="indexText">
    <children :input-val = 'indexText'></children>
  </div>
</template>

<script>
import Children from  'components/children'
export default {
  component:  {
    Children
  }
}
</script>

<template>
  <div class="children">
    {{  number  }}
  </div>
</template>
<script>
export default {
  props: {
    'input-val':  [String]
  }
}
</script>

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

原因：异步请求时，数据还没有获取到但是此时已经渲染节点了
解决方案：可以在 父组件需要传递数据的节点加上 v-if = false，异步请求获取数据后，v-if = true

2.子组件往父组件传值，通过emit事件

<template>
  <div class="children">
    <button @click="emitToParent">按钮点击传值给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitToParent() {
      this.$emit('child-event','childToParent')
    }
  }
}
</script>

<template>
  <div class="parent">
    <children @child-event="parebtEvent"></children>
  </div>
</template>

<script>
import Children from  'components/children'
export default {
  component:  {
    Children
  },
  methods: {
    parebtEvent(data) {
      console.log(data);
    }
  }
}
</script>

引用：https://blog.csdn.net/qq_35430000/article/details/79291287