组合式API
父传子
基本操作
- 父组件给子组件绑定属性
- 子组件内部通过props选项接受
静态传值
在App.vue中局部导入子组件，给子组件以添加属性的方式传值。
由于写了setup，所以无法直接配置props选项
因此需要借助于"编译器宏"函数 （defineProps） 接受子组件传递的数据
const props = defineProps({
car: String
})
对于pops传递过来的数据，模版中可以直接使用。（即模版中的插值表达式语法）
动态传值
App.vue导入ref，并且设置变量放置初始值。
import {ref} from 'vue'
const money = ref(100)
设置一个函数，让变量money每次点击按钮都自加2
子组件当中接收父组件传递过来的值与静态传值一样。
子传父
基本步骤
- 父组件当中给子组件标签用@绑定事件
- 子组件内部用emit方法触发事件，其中emit方法需要用defineEmits(数组)的方式来获取
子组件中首先运用defineEmits来获取emit方法，之后用emit向父组件传值。
父组件用 @changeMoney="changeFn" 接收子组件传过来的值，之后设定一个changFn函数来修改原来的值。
const changeFn = (newMoney) => {
money.value = newMoney
}
子传父通过这两个步骤就可以实现传值的效果了。
模版引用
模版引用需要在组件挂载完毕之后使用，可以获取到组件和元素并且直接使用。
模版引用需要调用ref函数，再利用ref标识来绑定ref对象到标签之中。
通过ref对象.value即可访问到绑定的元素 (必须渲染完成后才能拿到)
<script setup>
import TextCom from '@/components/text-com.vue';
import { onMounted, ref } from 'vue';
const clickFn = () => {
inp.value.focus();
}
const testRef = ref(null);
const getCom = () => {
console.log(testRef.value.count);
console.log(testRef.value.sayHi());
}
</script>
<template>
<div>
<input ref="inp" type="text">
<button @click="clickFn">点击让输入框获取焦点</button>
</div>
<TextCom ref="testRef"></TextCom>
<button @click="getCom">获取组件</button>
</template>
<script setup>
const count = 999;
const sayHi = () => {
console.log('你好');
}
defineExpose({
count,
sayHi
})
</script>
<template>
<div>
我是用于测试的组件 - {{ count }}
</div>
</template>
setup语法糖组件内部的属性和方法是不允许父组件访问的
那么此时使用defineExpose编译宏可以指定需要访问的属性和方法。
project 和 inject
即顶层组件向任意的底层组件传递数据和方法，实现了层级组件之间的通信。
跨层传递普通数据
App.vue组件使用provide函数提供数据。
bottom-com.vue文件使用inject函数获取数据
const themeColor = inject('theme-color');
<h3>我是底层组件 - {{ themeColor }}</h3>
跨层传递方法
顶层组件向底层组件传递方法，底层组件则调用方法修改顶层组件数据。
const count = inject('count');
<h3>我是底层组件 - {{ count }}</h3>
跨层传递函数
defineOptions
在父传子和子传父当中认识到了 defineEmits 和 defineProps 这两个编译宏，可是这两个只能用在emits和props当中。
为了能够定义组件中的name和其他自定义属性，那么defineOptins也就派上了用场。
defineModel
自定义组件中的v-model相当于传递一个modelValue属性，同时触发update:modelValue事件。
defineModel可以替代defineProps传过来的数据，即直接当做props来使用。
definModel明显比之前使用props接收再用emits触发更简洁。
