1. Vue2
1. From father to son
props
<!-- 父组件 -->
<template>
<child-component title="这是标题" content="这是内容，可能有各种类型" />
</template>
// 子组件
export default {
props: {
marjorCollegeName: {
type: String,
default: ''
},
content: {
type: [Array, String], // 把可能的类型都列出来
default: () => []
},
}
}
Event passing by value
<!-- 父组件 -->
<template>
<child-component ref="childcomponent" />
</template>
<script>
export default {
methods: {
this.$ref.childcomponent.changeData()
}
}
</script>
// 子组件
export default {
methods: {
changeData() {
}
}
}
vuex
vuexThe value of is synchronized in real time, and all components can be accessed. Due to too much content, this article will not introduce it in detail, and attach another vuexblog link that introduces the usage method in detail.
How to use vuex: https://blog.csdn.net/m0_53808238/article/details/117091249
2. Child and Father
Event passing by value
// 子组件
this.$emit('changeValue', 100)
// 父组件
export default {
methods: {
changeValue(value) {
console.log(value)
}
}
}
vuex
ditto,
How to use vuex: https://blog.csdn.net/m0_53808238/article/details/117091249
3. Brother components transfer each other
Routing parameters
this.$router.push({
path: "/detail",
query: {
id: 12345
},
})
export default {
computed: {
id() {
return this.$route.query.id;
},
},
}
browser cache
Use sessionStorageor localStorageto store/read.
// 存储
sessionStorage.setItem("id", 12345);
localStorage.setItem("id", 12345);
// 读取
sessionStorage.getItem("id");
localStorage.getItem("id");
If it is an object type, you need to use JSONto convert it.
JSON.stringify() 、JSON.parse()
vuex
ditto,
How to use vuex: https://blog.csdn.net/m0_53808238/article/details/117091249
Two, Vue3
1. From father to son
props
<!-- 输入 -->
<template>
<child-component id="12345" />
</template>
tsThe assertion type is required when receiving, if you are not sure whether to use it, you need to add a?
// 接收
<script setup lang='ts'>
const props = defineProps<{
id?: string,
}>()
</script>
Pineapple
There are a lot of content on how to use Pinia. This article is limited to space, so I won’t introduce it. A blog link that introduces how to use it in detail is attached.
How to use Pinia: https://juejin.cn/post/7213994684262891576
dependency injection
Dependency injection can not only pass values from parent to child, but also to deeper subcomponents. If the provided value is reactive data, then the injected value is also reactive. The so-called injection means reading.
// 父组件-提供
import {
provide } from 'vue'
provide('id', 12345)
// 后代组件-注入
import {
inject } from 'vue'
// 注入时需提供一个默认值
const id = inject<string>('id', '')
Event passing by value
<!-- 父组件 -->
<script setup lang='ts'>
import {
ref } from 'vue'
const childComponent = ref(null)
childComponent.value.getList()
</script>
<template>
<child-component ref="childComponent"></child-component>
</template>
// 子组件
const getList = () => {
console.log(12345)
}
2. Child and Father
Event passing by value
<!-- 父组件 -->
<child-component @onSearch="getList"></child-component>
// 子组件
const emit = defineEmits(['onSearch'])
const onSearch = () => {
emit('onSearch', 123456)
}
Pineapple
Ditto.
How to use Pinia: https://juejin.cn/post/7213994684262891576
3. Brother components transfer each other
Routing parameters
// 传递
import {
useRouter } from 'vue-router'
const router = useRouter()
router.push({
path: '/detail',
query: {
id: 12345
}
})
// 接收
import {
useRoute, computed } from 'vue-router'
const route = useRoute()
const id = computed(() => {
return route.query.id
})
browser cache
Use sessionStorageor localStorageto store/read.
// 存储
sessionStorage.setItem("id", 12345);
localStorage.setItem("id", 12345);
// 读取
sessionStorage.getItem("id");
localStorage.getItem("id");
If it is an object type, you need to use JSONto convert it.
JSON.stringify() 、JSON.parse()
Pineapple
Ditto.
How to use Pinia: https://juejin.cn/post/7213994684262891576
END