Vue3中子组件改变父组件传过来的值(props)的方法小结

// 父组件
<template>
  <div>
    <Child :message="parentMessage" @update:message="updateMessage" />
    <p>父组件值：{{ parentMessage }}</p>
  </div>
</template>

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

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

const updateMessage = (newMessage) => {
  parentMessage.value = newMessage;
};
</script>

// 子组件
<template>
  <div>
    <input v-model="localMessage" @input="handleInput" />
  </div>
</template>

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

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

const emit = defineEmits(['update:message']);

const localMessage = ref(props.message);

// 监听 props 的变化，同步本地值
watch(() => props.message, (newVal) => {
  localMessage.value = newVal;
});

const handleInput = () => {
  emit('update:message', localMessage.value);
};
</script>

// 父组件
<template>
  <div>
    <Child v-model:message="parentMessage" />
    <p>父组件值：{{ parentMessage }}</p>
  </div>
</template>

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

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

// 子组件
<template>
  <div>
    <input v-model="localMessage" />
  </div>
</template>

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

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

const emit = defineEmits(['update:message']);

const localMessage = computed({
  get() {
    return props.message;
  },
  set(value) {
    emit('update:message', value);
  }
});
</script>

// 父组件
<template>
  <div>
    <Child :message="parentMessage" @update:message="parentMessage = $event" />
    <p>父组件值：{{ parentMessage }}</p>
  </div>
</template>

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

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

// 子组件
<template>
  <div>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

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

const emit = defineEmits(['update:message']);

const updateMessage = () => {
  emit('update:message', 'New message from child');
};
</script>

// 父组件
<template>
  <div>
    <Child :data="parentData" />
    <p>父组件值：{{ parentData.message }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import Child from './Child.vue';

const parentData = reactive({ message: 'Hello from parent' });
</script>

// 子组件
<template>
  <div>
    <input v-model="data.message" />
  </div>
</template>

<script setup>
const props = defineProps({
  data: Object
});
</script>