vue3组件之间数据传递

1. 父传子
遵循vue的单向数据流，就是父组件能往子组件传递数据，但是子组件不能回传，父组件传递子组件数据的方式 就是在组件标签上使用属性绑定的方式进行传递，子组件中定义props对象，定义需要接受的数据，在setup中的props定义
父传子类型

父组件
<template>
    <div>parent</div>
    <Child></Child>
</template>
<script>
import Child from "./child.vue";
export default {
    components:{
        Child
    },
    setup() {
        
    },
}
</script>

子组件
<template>
    <div>child</div>
</template>
<script>
export default {
    props:{
        name:{
          type:String  
        },
    },
    setup(props,context) {
        console.log('props===',props)
        console.log('context===',context)
    },
}
</script>

		1 静态值传递

<Child name="传给子组件"></Child>

		2 动态值传递

<template>
    <div>parent</div>
    <Child :name="myName"></Child>
</template>
<script>
import { ref } from '@vue/reactivity';
import Child from "./child.vue";
export default {
    components:{
        Child
    },
    setup() {
        const myName = ref('传给子组件')
        return {
            myName
        }
    },
}
</script>

		3 布尔值传递

<Child name></Child>//默认为true
<Child :name="false"></Child>
<Child :name="true"></Child>

		4 阿拉伯数字传递

<Child :name="1"></Child>

		5 对象/数组传递

父组件
<template>
  <div>parent</div>
  <div>myObj的age==={{ myObj.age }}</div>
  <Child :name="myObj"></Child>
</template>
<script>
import { reactive, ref } from "@vue/reactivity";
import Child from "./child.vue";
export default {
  components: {
    Child,
  },
  setup() {
    const myName = ref("传给子组件");
    const myObj = reactive({
      name: "zs",
      age: 20,
    });
    return {
      myName,
      myObj,
    };
  },
};
</script>

子组件
<template>
  <div>child</div>
  <div>
    父组件对象name={{ pObj.name }}<br />
    父组件对象age={{ pObj.age }}
  </div>
  <button @click="change">改变父组件传递对象</button>
</template>
<script>
import {  toRefs } from "@vue/reactivity";
export default {
  props: ["name"],
  setup(props, context) {
    console.log("props===", props);
    console.log("context===", context);
    const pObj = toRefs(props).name;
    
    console.log("pObj====", pObj);
    console.log(pObj.value.age);
    const change=()=>{
        pObj.value.age++
    }
    return {
      pObj,
      change
    };
  },
};
</script>

传递对象或者数组的时候一定要注意
1 父组件传递给子组件的是对象或数组的引用，如果在子组件中修改接收到的对象值，父组件也是跟着变的，这种情况VUE限制不了，不建议使用
2 在子组件接收数据的时候，要把props使用toRefs方法运行一下，否则会报错，
toRefs：将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象响应的property的ref
如上所示，是子组件props的打印，可以看出，如果我们直接props.name的话是取不到的
上图是toRefs以后的打印，这样我们props.name就可以取到父组件的数据

3. 子传父

//子组件
<button @click="toPatent">子传父</button>
const toPatent=()=>{
    context.emit('toPatent',1)
}
//父组件
<Child :name="myObj" @toPatent='toPatent'></Child>
const toPatent=(data)=>{
        console.log(data)
    }

这个子传父和vue2没啥区别，都是通过事件进行传递
4. 传后辈
provid inject
直接上代码了，累了

//祖
import { reactive, ref,provide } from "vue";
provide('provideName',num)
    const changeProvid=()=>{
        num.value++
    }
 //孙
 import { inject } from "vue";
 const provideName=inject('provideName')

祖 组件改变数据，后辈组件也改变，只有写法上和vue2不太一样，其他的都一样
5. 兄弟组件传值
vue3中删除了全局事件总线，就是在vue2中用的eventBus，，在vue3中如果兄弟组件传值，可以通过vuex，或者使用vue官方提供的两个插件
mitt 或 tiny-emitter

仅记录平常学习