首先我們回顧一下vue2中父子組件是怎么傳值的，然后對比vue3進行詳解。

一、vue2中父子組件傳值

<!-- 父組件 -->
<template>
    <div>
  		// name：父組件把值傳給子組件test-child
  		// childFn：子組件傳遞值給父組件的自定義方法
      <test-child :name="name" @childFn="parentFn"></test-child>
      子組件傳來的值 : {{message}}
    </div>
</template>

<script>
export default {
    data() {
        return {
          message: '',
          name: '張三'
        }
    },
    methods: {
      // 接收子組件的傳值
       parentFn(payload) {
         this.message=payload;
       }
    }
}
</script>

<!-- 子組件 -->
<template> 
    <div>
  			{{name}}
        <input type="text" v-model="message" />
        <button @click="click">發送消息給父組件</button>
    </div>
</template>
<script>
export default {
		props:{
      name:{
        type:String,
        default:''
      }
    }
    data() {
        return {
          message: '我是來自子組件的消息'
        }
    },
    methods: {
      click() {
            // 1、childFn 組件方法名，請對照父組件
            // 2、message是傳遞給父組件的數據
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

上面的代碼可以看到我們vue2中父子組件之間傳值是通過prop傳值給子組件，子組件通過$emit把值傳遞給父組件進行交互。那么我們下面看看vue3中是如何進行組件之間傳值的。

二、provide & inject

vue3提供了provide() 和 inject() 兩個方法，可以實現組件之間的數據傳遞。父級組件中使用 provide() 函數向子組件傳遞數據；子級組件中使用 inject() 獲取父組件傳遞過來的數據。代碼如下：

<!-- 父組件 -->
<template>
  <div id="app">
    <test-child></test-child>
  </div>
</template>
<script>
import testChild from './components/testChild'
// 1. 按需導入 provide
import { provide } from '@vue/composition-api'
export default {
  name: 'app',
  setup() {
    //  App 根組件作為父級組件，通過 provide 函數向子級組件共享數據（不限層級）
    //  provide('要共享的數據名稱', 被共享的數據)
    provide('color', 'red')
  },
  components: {
    testChild
  }
}
</script>

<template>
  <div>
  <!--  通過屬性綁定，為標簽設置字體顏色 -->
  <h3 :style="{color: themeColor}">Level One</h3>
</div>
</template>
<script>
import { inject } from '@vue/composition-api'
export default {
  setup() {
    // 調用 inject 函數時，通過指定的數據名稱，獲取到父級共享的數據
    const themeColor=inject('color')
    // 把接收到的共享數據 return 給 Template 使用,進行數據渲染
    return {
      themeColor
    }
  }
}
</script>

通過上面的代碼我們可以發現，vue3中數據傳值更加簡單了，不用再引入子組件標簽上寫屬性，直接通過provide()設置指定的名稱，可以在子組件中通過inject()拿到，是不是感覺很簡單呢。

ue路由傳參的兩種方式query和params

點擊打開視頻講解更加詳細

【面試題】Vue路由傳參的兩種方式query和params_嗶哩嗶哩_bilibili