vue3 组件间通信的方式(setup语法糖写法)-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 组件间通信的方式(setup语法糖写法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3 组件间通信的方式(setup语法糖写法)

1. Props方式

该方式用于父传子，父组件以数据绑定的形式声明要传递的数据，子组件通过defineProps()方法创建props对象，即可拿到父组件传来的数据。

// 父组件
<template>
  <div>
    <son :msg="state.msg" />
  </div>
</template>

<script setup lang="ts">
import son from "./son.vue";
import { reactive } from "vue";
const state = reactive({
  msg: "父组件的值"
});
</script>

// 子组件
<template>
  <div>
    {{ msg }}
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  msg: {
    type: String,
    default: ""
  }
});
</script>

2. emit方式

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父。

// 父组件
<template>
  <div>
    <son @myClick="handleClick" />
  </div>
</template>

<script setup lang="ts">
import son from "./son.vue";
const handleClick = val => {
  console.log(val);
};
</script>

// 子组件
<template>
  <div>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(["myClick"]);
const handleClick = () => {
  emit("myClick", "我是子组件的值");
};
</script>

3、defineExpose

利用defineExpose+ref 可以得到组件里的方法和变量

// 父组件
<template>
  <div>
    <son ref="sonRef" />
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup lang="ts">
import son from "./son.vue";
import { ref } from "vue";
const sonRef = ref(null);
const handleClick = val => {
  console.log(sonRef.value.msg);
};
</script>

// 子组件
<template>
  <div>
    son
  </div>
</template>

<script setup lang="ts">
defineExpose({
  msg: "我是子组件"
});
</script>

4. provide/inject

provide/inject是 Vue 中提供的一对 API。无论层级多深，API 都可以实现父组件到子孙组件的数据传递。

// 父组件
<template>
  <div>
    <son />
  </div>
</template>

<script setup lang="ts">
import son from "./son.vue";
import { provide } from "vue";
provide("msg", "我是父组件");
</script>

// 子组件
<template>
  <div>
    {{ data }}
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
const data = inject("msg");
</script>

5、attrs

attrs可以接受除去 props、style、 class之外的属性。

// 父组件
<template>
  <div>
    <son :msg="state.msg" :hello="state.hello" />
  </div>
</template>

<script setup lang="ts">
import son from "./son.vue";
import { reactive } from "vue";
const state = reactive({
  msg: "我是父组件",
  hello: "hello"
});
</script>

// 子组件
<template>
  <div>
    son
  </div>
</template>

<script setup lang="ts">
import { useAttrs } from "vue";
const attrs = useAttrs();
console.log(attrs.msg); // 我是父组件
</script>

6. v-model方式

v-model不能严格成为数据的传递方式，其实只是减少了代码量。

// 父组件
<template>
  <div>
    <son v-model:msg="state.msg" />
    {{ state.msg }}
  </div>
</template>

<script setup lang="ts">
import son from "./son.vue";
import { reactive } from "vue";
const state = reactive({
  msg: "我是父组件"
});
</script>

子组件需要emit一个叫update:xxx的事件，再把需要更新的响应式数据传给emit方法的第二个参数即可。

// 子组件
<template>
  <div>
    son
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  msg: {
    type: String,
    default: ""
  }
});
console.log(props.msg);
// 子组件需要emit一个叫update:xxx的事件，再把需要更新的响应式数据传给emit方法的第二个参数即可
const emit = defineEmits(["msg"]);
const handleClick = () => {
  emit("update:msg", "我是子组件");
};
</script>