继续（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使用方法和适用场景的文章，感谢大家点击查看
