Vue组件间的传参（2）

继续（1）
一、路由传参数params 与 query父子

// 父组件传参数 params
this.$router.push({
     name:"children",
     params:{
         name:'userName',
         code:'0009'
      }
 });
// 父组件传参数 query
this.$router.push({
     path:"children",
     query:{
         name:'userName',
         code:'0009'
      }
 });

子组件接收
this.$route.params.name  // userName
子组件接收
this.$route.query.code  // 0009

二、跨级别传参数provide和inject

// 父组件
<template>
  <div>
    <provide:message="name">
      <child></child>
    </provide>
  </div>
</template>
<script>
import Provide from './Provide.vue'
import Child './Child.vue'
export default {
  components: {
    ProvideMessage,
    ChildComponent
  },
  data() {
    return {
      hello: 'User Name!'
    }
  }
}
</script>

// Provide组件
<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      message: this.message
    }
  },
  props: {
    message: String
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    inject: ['message']
  }
</script>

三、ref和refs传参

// 在Vue中使用ref来传递数据。
// 首先，需要导入ref函数：

import { ref } from 'vue';
// 然后可以创建一个ref对象并将其赋值为所需的初始数据：

const data = ref('Hello Vue!'); // 这里的'data'就是我们想要传递的数据
// 接下来，可以通过.value属性获取或修改该数据：

console.log(data.value); // 输出：Hello Vue!
 
// 修改数据
data.value = 'New Data';
console.log(data.value); // 输出：New Data
// 如果希望在模板中直接使用ref对象而不必每次都写.value，则可以使用toRefs// // 函数进行转换：

import { toRefs } from 'vue';
 
export default {
  setup() {
    const data = ref('Hello Vue!');
    
    return { ...toRefs(data) };
  },
};
// 现在，在模板中可以直接使用data变量了：

<template>
  <div>{{ data }}</div> <!-- 显示：Hello Vue! -->
</template>

四、VueX
VueX 主要应用于状态管理和集中管理程序状态，如果单纯用于传参需要代码较为冗余。传参以上方法更为便捷。之后会有Vue X使用方法和适用场景的文章，感谢大家点击查看