详解Vue3.x中组件间参数传递的示例代码

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

const props = defineProps({
  message: String
});
</script>

<template>
  <div>来自父组件的消息：{{ message }}</div>
</template>

// ParentComponent.vue
<template>
  <ChildComponent message="Hello, Vue3!"></ChildComponent>
</template>

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

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

const emit = defineEmits(['update']);
const updateMessage = () => {
  emit('update', '来自子组件的新消息');
};
</script>

<template>
  <button @click="updateMessage">更新消息</button>
</template>

// ParentComponent.vue
<template>
  <ChildComponent @update="handleUpdate"></ChildComponent>
</template>

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

const message = ref('');

const handleUpdate = (newMessage) => {
  message.value = newMessage;
};
</script>

// BrotherComponent1.vue
<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['send']);
const sendMessage = () => {
  emit('send', '来自兄弟1的消息');
};
</script>

<template>
  <button @click="sendMessage">发送消息给兄弟2</button>
</template>

// BrotherComponent2.vue
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: String
});
</script>

<template>
  <div>{{ message }}</div>
</template>

// ParentComponent.vue
<template>
  <BrotherComponent1 @send="handleSend"></BrotherComponent1>
  <BrotherComponent2 :message="message"></BrotherComponent2>
</template>

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

const message = ref('');

const handleSend = (msg) => {
  message.value = msg;
};
</script>

npm install vuex@next --save

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      message: ''
    };
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
});

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

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

// BrotherComponent1.vue
<script setup>
import { useStore } from 'vuex';

const store = useStore();

const sendMessage = () => {
  store.commit('updateMessage', '来自兄弟1的消息');
};
</script>

<template>
  <button @click="sendMessage">发送消息给兄弟2</button>
</template>

// BrotherComponent2.vue
<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const message = computed(() => store.state.message);
</script>

<template>
  <div>消息：{{ message }}</div>
</template>

// BaseButton.vue
<script setup>
// 注意，这里我们不声明具体的 props
</script>

<template>
  <button v-bind="$attrs">{{ $attrs.label }}</button>
</template>

// App.vue
<template>
  <BaseButton
    label="点击我"
    class="btn-primary"
    @click="handleClick"
  ></BaseButton>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了！');
};
</script>