vue3.0 03 父子组件通信 父组件使用ref获取子组件中所有数据 子组件中使用expose限定父组件中获取范围操作流程

1. 父组件使用ref获取到子组件所有数据流程

1.创建Demo01子组件模板,在父组件中调用Demo01并且定义ref

<Demo01 ref="getSonMsg"></Demo01>

2.声明ref中数据内容

let getSonMsg = ref();

3.从子页面获取到子页面所有数据内容

 onMounted(() => {
   console.log("使用ref获取到的子页面中的数据是：", getSonMsg.value);
 });

4.父页面完整代码

<template>
  <div>
    <h1>这里是被定义的父组件01</h1>
    <Demo01 ref="getSonMsg"></Demo01>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Demo01 from "./Son.vue";

export default {
  components: {
    Demo01,
  },
  setup() {
    let getSonMsg = ref();

    onMounted(() => {
      console.log("使用ref获取到的子页面中的数据是：", getSonMsg.value);
    });

    return { getSonMsg };
  },
};
</script>

2.子组件使用expose对父组件中能够获取到的内容进行限定

1.expose方法位于setup()语法的第二个参数==》context中 前面的用于父传子的props即使用不到，也应该被声明，用于占位

  setup(props, context) {}

2. 结构expose

    const { expose } = context;

3.使用expose方法限定允许对外暴漏的数据 //如上现在的子组件中只有 num和add方法

expose({ num }); 

4.子页面完整代码

<template>
  <div>
    <h3>demo01中的子组件</h3>
    <button @click="add()">+</button><button>{{ num }}</button>
  </div>
</template>

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

export default {
  // 使用加减法案例练习组件通信
  setup(props, context) {
    console.log("context", context);

    // 从context数据中结构expose方法
    const { expose } = context;

    let num = ref(10);

    let add = () => {
      num.value++;
    };

    expose({ num }); //当前只暴露num，add方法没有在暴露限定的范围里

    return { num, add };
  },
};
</script>

<style scoped>
div {
  border: 1px solid green;
}
</style>