vue组件子组件修改变量同步修改父组件

父组件:

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
const name = ref('v-model argument exss mple')
</script>

<template>
  <h1>{{ name }}</h1>
  <MyComponent v-model:titlme="name" />
</template>

父组件中绑定传递的值使用v-modle 然后子组件中可以使用update:(变量name)的emit事件直接修改父组件中传递给子组件的值

子组件:

<script setup>
let props = defineProps({
titlme: String})
defineEmits(['update:titlme'])
</script>

<template>
  <input
    type="text"
    :value="props.titlme"
    @input="$emit('update:titlme', $event.target.value)"
  />
</template>

你可能感兴趣的:(vue.js,javascript,前端)