第一种：
父类传子类。
// 父组件
<template>
<son :isShow="data.isShow"></son>
</template>
<script>
import son from '../components/son.vue'
import { reactive } from 'vue' // 千万别忘记了 这个导入
export default {
components: {
son
},
setup (props, context) { // centext 等价与setup(props,{emit}){}下面直接用emit(事件名,参数) 就好
let data = reactive({
isShow: false,
}); // 等价与 const isShow = ref(false)
//reactive 是因为我这个页面有很多的数据 我不想在return 里一个一个写 我就写成了一个对象
// 完事了把这个对象直接return出去省事 要加值也可以 放在里头，不过要import 进来
return {
data
}
},
}
</script>//子组件
<template>
<div class="menu">
{{isShow}}会显示 父组件传过来的值如果父组件传的是false 这里就是false
</div>
</template>
<script>
import { reactive } from "vue";
export default {
props: {
isShow: Boolean // 这里需要标定父组件传过来的类型是什么 布尔 数组 对象等等等等
},
setup (props, context) {
let data = reactive({
})
return {
data
}
}
}
</script>第二种：
这种类似于vueX 仓库，vueX 就是把页面需要用的数据放在一个地方 其他页面也可以去这个仓库去拿这个值。
// 父组件
<template>
<son :isShow="data.isShow"></son>
</template>
<script>
import son from '../components/son.vue'
import { reactive, provide } from 'vue' // 千万别忘记了 这个导入
export default {
components: {
son
},
setup (props, context) { // centext 等价与setup(props,{emit}){}下面直接用emit(事件名,参数) 就好
provide("isShow",false) // provide 这个东西不放在 setup里头会报错。你就当是个专门给组件传值当 生命周期吧。
// 讲到生命周期， vue3用function 来区分 方法还是生命周期 可能是尤大觉得 这样比较清晰。阔是我没适应过来 就有点 乱七八糟的。 如果是自定义方法 前面要加function 如果是生命周期 前面的就没有funciton了
return {
data
}
},
}
</script>// 子组件
<template>
<div>
{{isShow}}
</div>
</template>
<script>
import son from '../components/son.vue'
import { reactive, inject } from 'vue' // 千万别忘记了 这个导入
export default {
components: {
son
},
setup (props, context) { // centext 等价与setup(props,{emit}){}下面直接用emit(事件名,参数) 就好
const isShow = inject("isShow") // inject 和 provide 一样不放在 setup里头会报错。你就当是个
return {
isShow
}
},
}
</script>provide 等于建立了一个向下的单向的 仓库 比如：A页面用了provide 建立了一个仓库 那么只只有A中用的到过的子组件！！！ 才能get到A页面传到值。如果不是A的子组件则就取不到这个A放在仓库里的值，
provide不限层级，只要是处于A页面下的子组件 或者孙子组件都可以。
provide和inject都需要放在setup中才能够使用，不在里头会报错像下面这样。