vue3.0组件通信

530 阅读1分钟

vue3.0组件通信 笔记

1.父传子

父组件:

<Check :status="status" />

setup(props, context) {
    const status = ref(1);
    return {
      status
    };
  },

子组件:

<div>{{ status }}</div>
<script setup="props">
import { defineProps } from 'vue'
const props = defineProps({
  status: Number
})

2.子组件调用父组件方法

如:关闭父组件的弹窗

子组件:

<div @click="off('false')"></div>
setup(props, context) {
    const off = (data) => {
      // 点击关闭按钮
      context.emit('handle', data);
    }
    return {
      off
    };
 },

父组件:

<!-- 侧边栏 -->
<van-popup
  v-model:show="checkShow"
  position="right"
  round
  :style="{ width: '7.18rem' }"
>
  <Check @handle="handleFun" />
</van-popup>

<script setup>
import { ref } from "vue";

const checkShow = ref(false);
const handleFun = (data) => {
  checkShow.value = false; //checkShow弹窗
};

3.支持多个数据双向绑定

父组件:

<child v-model:a="a" v-model:b="b"></child>
<script setup>
    import { ref } from "vue"
    import child from "./child.vue" 
    const a = ref("xxx")
    const b = ref("哈哈")
</script>

子组件:

<template> 
<div @click="handle">按钮</div> 
</template>
<script setup>
    const { emit } = useContext();
    const handle = () => { 
        emit("update:a", "更新父级的a值") 
        emit("update:b", "更新父级的b值") 
    }
</script>

4. provide / inject

provide / inject 为依赖注入

provide:可以让我们指定想要提供给后代组件的数据或

inject:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用

父组件:

<script setup> 
    import { provide } from "vue"
    provide("title", "哈哈哈") 
</script>

子组件:

<script setup> 
    import { inject } from "vue"
    const title = inject("title")
    console.log(title) //哈哈哈
</script>

5. expose / ref

父组件获取子组件的属性或者调用子组件的方法

子组件:

<script setup> 
    // 方法一 不适用于Vue3.2版本,该版本 useContext()已废弃
    import { useContext } from "vue"
    const { expose } = useContext();
    // 子组件抛出方法
    expose({
      childName: "这是子组件的属性",
      someMethod(){ 
          console.log("这是子组件的方法")
      }
    });
    
    方法二:适用于vue3.2版本,不需要引入
    //import { defineExpose } from "vue";
    defineExpose({
        childName: "这是子组件的属性,
        someMethod(){
        console.log("这是子组件的方法")
        }
    })
</script>

父组件:注意 ref="RefChilde"

<template> 
    <child ref="RefChilde"></child>
    <button @click="handle">按钮</button> 
</template>
<script setup> 
    import child from "./child.vue;
    import { ref } from "vue"
    const RefChilde = ref(null)
    const handle = () => {
    console.log(RefChilde.value.childName)//获取子组件对外暴露的属性
        RefChilde.value.childClick()//调用子组件的里的方法
    }
</script>

部分借鉴于 juejin.cn/post/699968…