Vue3中各种灵活传递数据的方式小结

// 父组件
<template>
  <ChildComponent :message="greeting" />
</template>

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

const greeting = 'Hello!';
</script>

// 子组件
<script setup>
const props = defineProps({
  message: String,
});
console.log(message); // "Hello!"
</script>

// 父组件
<template>
  <ChildComponent @updateMessage="newGreeting = $event" />
  <p>{{ newGreeting }}</p>
</template>

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

// 子组件
<script setup>
const emit = defineEmits(['updateMessage']);
const updateParent = () => {
  emit('updateMessage', 'Updated from child!');
};
</script>

// 父组件
<script setup>
import { provide } from 'vue';
provide('theme', 'dark');
</script>

// 子孙组件
<script setup>
import { inject } from 'vue';
const theme = inject('theme');
console.log(theme); // "dark"
</script>

const theme = inject('theme', 'light'); // 如果没有找到提供者，则使用 'light' 作为默认值

npm install vuex

import { createStore } from 'vuex';

export default createStore({
  state: {
    theme: 'light',
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme;
    },
  },
  actions: {
    changeTheme({ commit }, theme) {
      commit('setTheme', theme);
    },
  },
  getters: {
    currentTheme(state) {
      return state.theme;
    },
  },
});

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

<template>
  <div :class="theme">
    <!-- 使用 getter -->
    <p>The current theme is {{ currentTheme }}.</p>
    <!-- 使用 action -->
    <button @click="changeTheme('dark')">Switch to dark theme</button>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const theme = computed(() => store.state.theme);
const currentTheme = computed(() => store.getters.currentTheme);

function changeTheme(newTheme) {
  store.dispatch('changeTheme', newTheme);
}

onMounted(() => {
  console.log('Current theme:', store.getters.currentTheme);
});
</script>