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

最新推荐文章于 2025-03-04 09:50:04 发布

Aucanon

最新推荐文章于 2025-03-04 09:50:04 发布

阅读量678

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_51524737/article/details/135203384

版权

父组件：

<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>