1、props/defineProps:父组件向子组件传值
父组件:
<ActButton text="导出Excel" @on-click="exportExcel" />
子组件:
const props = defineProps({
text: {
type: String,
default: () => "",
}
}
2、emits/defineEmits:子组件向父组件传值
const emits = defineEmits(["on-click"]);
const click = () => {
emits("on-click");
};
官方:https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
3、ref/defineExpose:允许父组件访问子组件的特定属性或方法
父组件:通过ref获取子组件实例
子组件:通过defineExpose暴露方法
子组件:
<div>{{ count }}</div>
<button @click="increment">++子组件++</button>
const count = ref(0);
function increment() {
count.value++;
}
// 使用defineExpose暴露count和increment给父组件
defineExpose({
count,
increment,
})
父组件:
<Child ref="childRef" />
<button @click="add">++父组件++</button>
const childRef = ref(null);
function add() {
if (childRef.value) {
console.log(childRef.value?.count)
childRef.value.increment();
console.log('after==', childRef.value.count);
}
}
父组件可以通过 ref 访问子组件实例并调用defineExpose暴露的属性和方法,使用 defineExpose 可以让组件更加模块化和可控,只有显式暴露的部分才能被外部访问,增强了封装性和安全性
官方:https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
4、provide/inject:解决props逐级透传问题
父组件中提供数据,并在子组件中注入这些数据,从而实现了组件之间的数据传递。
一个父组件相对于其所有的后代组件,会作为依赖提供者。
任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。
官网:https://cn.vuejs.org/api/composition-api-dependency-injection.html
顶级组件通过provide提供数据,后代组件通过inject能接收返回的数据 ,通常在祖孙后代组件之间传递数据
爷爷组件:
let list = ref(["1", "2", "3"]);
provide("list", list);
孙子组件:
const listData = inject("list");
console.log("son", listData);
提示:provide/inject适用于大型应用,滥用会导致不必要的复杂性和混乱,对于局部的、仅在某个组件内部使用的依赖项,使用 props 更合适。
5、v-model/defineModel:语法糖,在组件上实现双向绑定(Vue3.4+)
官网:https://cn.vuejs.org/guide/components/v-model.html
父组件:
<Child v-model="inputValue" />
<p>父组件: {{ inputValue }}</p>
let inputValue = ref('')
子组件:
<input v-model="model" />
<button @click="init">reset</button>
const model = defineModel();
function init() {
model.value = "子组件init";
}
组件 v-model 等同于给子组件传递一个名为 modelValue 的props;并接受一个名为 update:modelValue 的事件。
参考:https://blog.csdn.net/Liu_yunzhao/article/details/136045624
6、useAttrs():属性透传
透传Attributes允许在组件中自动将父组件的未声明 Props 直接传递给子组件的根元素或另一个指定元素
官网:https://cn.vuejs.org/guide/components/attrs.html#fallthrough-attributes
<Child title="标题" content="内容" @click="handleClick" />
function handleClick() {
console.log("点击!!");
}
子组件:
<div>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
<button @click="onClick">点击</button>
</div>
const { title, content, onClick } = useAttrs();
// console.log(title, content, onClick)
使用useAttrs函数可以接收父组件传递的属性和事件,在组件中可以直接使用这些属性和事件,无需在props和emits中声明。
7、Pinia/Vuex:状态管理,主要用来解决多个组件状态共享的问题
https://mp.weixin.qq.com/s/1tUkWA1Df6k1lX8q5PW17g
其他: