目录
create-vue创建项目
npm init vue@latest
一. 父子通信
1. 父传子
父组件中给子组件绑定属性
子组件内部通过props选项接收数据
// 父组件
<script setup>
import sonVue from "./son.vue";
</script>
<template>
<sonVue msg="this is msg" />
</template>
<style scoped></style>// 子组件
<script setup>
//子组件内部通过props选项接收数据
const props = defineProps({
msg: String,
});
</script>
<template>
<div>{
{ msg }}</div>
</template>
<style scoped></style>
2. 子传父
父组件中给子组件标签通过@绑定事件
子组件内部通过 emit 方法触发事件
// 父组件
<script setup>
import sonVue from "./son.vue";
// 获取传递子组件传递的值 val
const getMessage = (val) => {
console.log(val);
};
</script>
<template>
<!-- 1.绑定自定义事件 getMessage -->
<sonVue @getMessage="getMessage" />
</template>
<style scoped></style>
// 子组件
<script setup>
//2. 生成emit方法
const emit = defineEmits(["getMessage"]);
const sendMsg = () => {
//3.触发自定义事件,并传递参数
emit("getMessage", "this is msg");
};
</script>
<template>
<button @click="sendMsg">测试</button>
</template>
<style scoped></style>
二. 模版引用(通过ref获取实例对象)
概念：通过 ref标识 获取真实的 dom对象或者组件实例对象
1.基本使用
调用ref函数生成一个ref对象
通过ref标识绑定ref对象到标签
<script setup>
import { ref } from "vue";
//1.调用ref函数得到ref对象
const TestRef = ref(null);
//输出得到一个RefImpl对象
console.log(TestRef);
</script>
<template>
<!-- 2. 通过ref标识绑定ref对象 -->
<div ref="TestRef">测试一下</div>
</template>
<style scoped></style>
2.defineExpose
- 默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，为了显式暴露某些属性或方法，可以使用 defineExpose
- 常用于组件上绑定一个ref属性,来获取需要的某些属性或方法
// 子组件
<script setup>
import { ref } from "vue";
//方法
const count = ref(0);
const setCount = () => {
count.value++;
};
//值
const a = ref("this is test data");
const b = ref(2);
defineExpose({
a,
b,
setCount,
});
</script>
<template>
<button @click="count">count</button>
</template>
<style scoped></style>//父组件/页面
<script setup>
import TestDefineExpose from "./components/test2/TestDefineExpose.vue"; //引入
const onTest = () => {
console.log(Exposeref.value.a);
console.log(Exposeref.value.b);
console.log(Exposeref.value.setCount);
};
</script>
<template>
<TestDefineExpose ref="Exposeref" />
<button @click="onTest"></button>
</template>三. 跨层通信 - provide和inject
1. 作用和场景
顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
2. 跨层传递普通数据
实现步骤
顶层组件通过
provide函数提供数据底层组件通过
inject函数提供数据
3. 跨层传递响应式数据
在调用provide函数时，第二个参数设置为ref对象
4. 跨层传递方法
顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据
