vue3 组件传值的几种方式

第一种：

 

        父类传子类。

// 父组件  
<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中才能够使用，不在里头会报错像下面这样。