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>
  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件中,可以通过`v-model`指令将组件的数据双向绑定到组件上。使用`v-model`指令的组件可以像操作一个普通的变量一样来操作组件的属性。 在组件中,需要声明一个名为`value`的props属性来接收组件传递的,并且在组件中通过`$emit`方法来触发一个名为`input`的自定义事件,将修改后的传递给组件。 以下是一个示例,展示了如何在Vue组件中使用`v-model`进行双向绑定: ```vue // 组件 Child.vue <template> <div> <input type="text" :value="value" @input="updateValue($event.target.value)"> </div> </template> <script> export default { props: { value: { type: String, required: true } }, methods: { updateValue(newValue) { this.$emit('input', newValue); } } } </script> // 组件 Parent.vue <template> <div> <child v-model="message"></child> <p>Message: {{ message }}</p> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child }, data() { return { message: '' } } } </script> ``` 在组件中,使用`v-model="message"`将组件的`message`属性与组件进行双向绑定。组件接收组件传递的并显示在输入框中,同时监听输入框的`input`事件,将新的通过`$emit('input', newValue)`发送给组件进行更新。 组件中的`<p>Message: {{ message }}</p>`用于展示绑定的,当组件的输入框发生变化时,组件中的`message`也会同步更新。 这样,通过`v-model`指令可以方便地在Vue组件中实现组件之间的双向数据绑定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值