组件十大传值

一、`defineProps` 和 `defineEmits`

defineProps 用于定义子组件接收的 props，即父组件传递给子组件的数据。

接收父组件传递的数据：定义子组件可以接受的属性及其类型。
类型检查：确保传递的数据符合预期的类型。

defineEmits 用于定义子组件可以触发的事件，从而向父组件传递数据或通知父组件发生了某些操作。

触发事件：子组件可以通过触发事件来通知父组件。
传递数据：事件可以携带数据传递给父组件。

//父组件:
<template>
  <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const parentMessage = ref('Hello from Parent');

const handleChildEvent = (message) => {
  console.log('Received from child:', message);
};
</script>

//子组件
<template>
  <div>
    {{ message }}
    <button @click="sendMessageToParent">Send Message to Parent</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  message: String,
  default:''
});

const emit = defineEmits(['childEvent']);

const sendMessageToParent = () => {
  emit('childEvent', 'Hello from Child');
};
</script>

二、`v-model`

双向数据绑定

// 父组件
<template>
  <ChildComponent v-model="parentMessage" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const parentMessage = ref('Hello from Parent');
</script>

// 子组件
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: String
});

const emit = defineEmits(['update:modelValue']);
</script>

自定义 `v-model` 的 prop 和 event 名称

// 父组件
<template>
  <ChildComponent v-model:title="parentTitle" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const parentTitle = ref('Hello from Parent');
</script>

// 子组件
<template>
  <input :value="title" @input="$emit('update:title', $event.target.value)" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: String
});

const emit = defineEmits(['update:title']);
</script>

三、`refs`

直接访问子组件实例或 DOM 元素，即操作dom节点。

// 父组件
<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);

const callChildMethod = () => {
  childRef.value.childMethod(); // Child method called
  console.log(childRef.value.name) // panda
};
</script>

// 子组件
<template>
  <div>Child Component</div>
</template>

<script setup>
const childMethod = () => {
  console.log('Child method called');
};
const name=ref('panda')
defineExpose({
  childMethod,
  name,
});
</script>

四、`provide` 和 `inject`

祖先组件向后代组件传递数据，适用于多层级组件之间共享数据传值，从而减少 props 钓鱼（prop drilling）的问题。

<template>
  <div>
    <h1>父组件</h1>
    <p>提供的消息: {{ parentMessage }}</p>
    <IntermediateComponent />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import IntermediateComponent from './IntermediateComponent.vue';

// 定义要提供的数据
const parentMessage = ref('Hello from Parent');

// 使用 provide 提供数据
provide('parentMessage', parentMessage);
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

//中间组件-子组件
<template>
  <div>
    <h2>中间层组件</h2>
    <ChildComponent />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

<template>
  <div>
    <h3>子组件</h3>
    <p>接收到的消息: {{ receivedMessage }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 使用 inject 接收父组件提供的数据
const receivedMessage = inject('parentMessage');
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

五、路由传参

Query

通过 URL 查询参数传递数据

// 父组件
<template>
  <router-link :to="{ name: 'Child', query: { message: 'Hello from Parent' } }">Go to Child</router-link>
</template>

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

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const message = route.query.message;
</script>

Params

通过 URL 参数传递数据

// 父组件
<template>
  <router-link :to="{ name: 'Child', params: { id: 123 } }">Go to Child</router-link>
</template>

//子组件
<template>
  <div>ID: {{ id }}</div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.params.id;
</script>

State

通过路由状态传递数据

//父组件
<template>
  <router-link :to="{ name: 'Child', state: { message: 'Hello from Parent' } }">Go to Child</router-link>
</template>

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

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const message = route.state?.message || '';
</script>

六、Pinia

vue3状态管理

// Pinia Store
import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    message: 'Hello from Pinia'
  }),
  actions: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
});

// 父组件
<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update Message</button>
</template>

<script setup>
import { useMainStore } from '../stores/main';

const store = useMainStore();

const message = store.message;

const updateMessage = () => {
  store.updateMessage('Updated Message');
};
</script>

七、浏览器缓存`localStorage` 或 `sessionStorage`

// 父组件
<template>
  <div>{{ cachedMessage }}</div>
  <input v-model="cachedMessage" @input="saveMessage" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const cachedMessage = ref(localStorage.getItem('message') || '');

const saveMessage = () => {
  localStorage.setItem('message', cachedMessage.value);
};

onMounted(() => {
  cachedMessage.value = localStorage.getItem('message') || '';
});
</script>

八、 `window` 对象全局挂载

// 父组件
<template>
  <div>{{ globalMessage }}</div>
  <input v-model="globalMessage" @input="updateGlobalMessage" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const globalMessage = ref(window.globalMessage || '');

const updateGlobalMessage = () => {
  window.globalMessage = globalMessage.value;
};

onMounted(() => {
  globalMessage.value = window.globalMessage || '';
});
</script>

九、兄弟组件传值 (mitt)

// 安装 mitt
npm install mitt

// 创建事件总线
// eventBus.js
import mitt from 'mitt';

export const emitter = mitt();

// 兄弟A
<template>
  <button @click="sendMessageToSibling">Send Message to Sibling</button>
</template>

<script setup>
import { emitter } from '../eventBus';

const sendMessageToSibling = () => {
  emitter.emit('siblingEvent', 'Hello from Sibling A');
};
</script>

// 兄弟B
<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { emitter } from '../eventBus';

const message = ref('');

const handleMessage = (msg) => {
  message.value = msg;
};

onMounted(() => {
  emitter.on('siblingEvent', handleMessage);
});

onUnmounted(() => {
  emitter.off('siblingEvent', handleMessage);
});
</script>

十、$attrs

透传属性: 将父组件传递的所有非 prop 属性自动应用到子组件的根元素或其他指定元素上。
样式和类: 传递 class 和 style 属性，以便子组件能够继承父组件的样式。
事件监听器: 传递事件监听器，使得子组件能够响应父组件传递的事件。

// 父组件
<template>
  <ChildComponent class="parent-class" style="color: red;" custom-attr="custom-value" @click="handleClick" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const handleClick = () => {
  console.log('Clicked on ChildComponent');
};
</script>

// 子组件
<template>
  <div v-bind="$attrs">
    Child Component
  </div>
</template>

<script setup>
// 子组件不需要显式声明父组件传递的属性
</script>

<style scoped>
.parent-class {
  background-color: yellow;
}
</style>

默认情况下，Vue 会将 $attrs 应用到子组件的根元素上。如果你不希望这样做，可以通过设置 inheritAttrs: false 来禁用这个行为。

// 子组件
<template>
  <div>
    <span v-bind="$attrs">Child Component</span>
  </div>
</template>

<script setup>
// 禁用自动应用 $attrs 到根元素
defineOptions({
  inheritAttrs: false
});
</script>

如果想访问$attrs对象

// 子组件
<template>
  <div>
    <span v-bind="filteredAttrs">Child Component</span>
  </div>
</template>

<script setup>
import { useAttrs, computed } from 'vue';

const attrs = useAttrs();

const filteredAttrs = computed(() => {
  // 过滤掉不需要的属性
  return Object.fromEntries(
    Object.entries(attrs).filter(([key]) => !['custom-attr'].includes(key))
  );
});
</script>