vue3之组件传参通讯总结

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://pinia.vuejs.org/

https://mp.weixin.qq.com/s/1tUkWA1Df6k1lX8q5PW17g 

 

其他：

vue 同级组件间传值_多个同级组件传值-CSDN博客

vue 刷新组件方法记录_vue.forceupdate() 配置-CSDN博客