常用的Vue组件传值，及路由传参

父子组件之间传递数据

父组件 --- 子组件 props

#父组件
<template>
<!--父组件定义相对应的变量,通过 :名称=“数据” 的方式传递给子组件, @handleChange是子组件回传给父组件的事件-->
<!--子组件$emit事件的第一个参数是事件名称，第二个参数是数据，-->
  <TheTableComponents :columns="columns" :loadData="loadData" @handleChange="handleChange"/>
</template>

<script>
  import TheTableComponents from '../components/TheTableComponents/TheTableComponents'
  export default {
    name: 'TheTableTest',
    components: { TheTableComponents },
    data () {
      return {
        columns: [],
        loadData: []
      }
    },
    methods: {
      handleChange (val) {
          // 如果传递参数过来，就直接在这里加上形参接收即可 (val)
      }
    }
  }
</script>

#子组件
<template>
  <a-table
    :title="() => {
      return 'nihaoa'
    }"
    size="small"
    rowKey="id"
    :columns="columns"
    :dataSource="loadData"
  >
  </a-table>
  <a-button @click="handleEmit">传递信息给父组件</a-button>
</template>

<script>
  export default {
    name: 'TheTableComponents',
    // 通过props来接收传递过来的参数，两种方式
    props: ['columns','loadData'] // 这种方式不可以指定类型、默认值、和是否必须要传递
    /***************************************/
    props: {
      columns: {
        type: Array, // 指定类型，如果类型不对，控制台会报错
        default: () => [], // 默认值
        required: true， //是否必传， 不传递也会报错
      },
      loadData: {
        type: Array,
        default: () => [],
        required: true
      }
    },
    methods: {
      handleEmit () {
        this.$emit('handleChange') 
      }
    }
  }
</script>

provide方法

此方法相当于父组件中存放一个值， 谁用谁都可以去拿（子组件）

<script>
/**
* 父组件
*/
  export default {
    name: 'TheTableComponents',
    provide () { // 注入一个参数
      return {
        someValue: '来自祖先的神秘遗产'
      }
    }
  }
</script>

<script>
/**
* 子组件
*/
  export default {
    name: 'TheTableComponents',
    inject:[‘someValue’] // 获取父组件注入的参数
  }
</script>

如果同一数据被多个组件使用，建议使用Vuex来管理此数据

Router 路由传参有两种方式

1、params

<template>
  <div id="app">
    <div id="nav">
      <a-button @click="handleNavGetTo">路由跳转</a-button>
    </div>
    <router-view/>
  </div>
</template>
<script>
  export default {
    methods: {
      handleNavGetTo () {
        this.$router.push(
          {
            name: 'test', // 此处要用name去跳转， 如果用path跳转， params会没有参数的
            params: {
              content: '我是Params传递的参数'
            }
          }
        )
      }
    }
  }
</script>
/*****************************************************/
// 父组件接收
<script>
 expoet default {
    mounted () {
      console.log(this.$route) // 此处需注意一下， 传递用router， 接收用route
    }
 }
</script>

params.jpg

2、query

<template>
  <div id="app">
    <div id="nav">
      <a-button @click="handleNavGetTo">路由跳转</a-button>
    </div>
    <router-view/>
  </div>
</template>
<script>
  export default {
    methods: {
      handleNavGetTo () {
        this.$router.push(
          {
            path: 'test',
            query: {
              content: '我是query传递的参数'
            }
          }
        )
      }
    }
  }
</script>
/*****************************************************/
// 父组件接收
<script>
 expoet default {
    mounted () {
      console.log(this.$route) // 此处需注意一下， 传递用router， 接收用route
    }
 }
</script>

query1.jpg query2.jpg

两者的区别：

  params传递密文，有大小的限制，页面刷新数据会丢。
  query 传递明文，相对于来说没有限制，页面刷新数据也会存在