vue修改父组件对象
由于vue3在api文档上没有 .sync修饰符,可能要准备去除了,所有要准备其它的方法来替换,
其实.sync是换到了v-model上了,如果v-model用在input、select等几个标签上,是和vue2没有区别的,
但在vue3它做了一些的修改,
1、修改父组件的单一的值
这种是用的比较多的,单一的值一般只用ref,
//父组件
<template>
<CustomInput v-model="message" /> {{ message }}
</template>
<script setup>
import { ref } from 'vue'
import child from './child.vue'
const message = ref('hello')
</script>
//子组件
<template>
<div>{{modelValue}}</div>
<button @click="mode">点击修改父组件的值</button>
</template>
<script setup>
//如果父组件没有改绑定的值是,是用以下的默认值(下面是解构)
const { modelValue } = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const mode = ()=>{
emit('update:modelValue','hi')
}
</script>
2、修改父组件的对象
这个对象是指object对象,不推荐,限制多
//父组件
<template>
<CustomInput v-model="message" /> {{ message }}
</template>
<script setup>
import { ref } from 'vue'
import child from './child.vue'
// 修改父组件object对象,只能用ref,使用reactive还修改不了
const message = ref({name:'张三'})
</script>
//子组件
<template>
<div>{{modelValue}}</div>
<button @click="mode">点击修改父组件的值</button>
</template>
<script setup>
const { modelValue } = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const mode = ()=>{
//而且只能先定义好赋值,
let b = {name:'李四'}
emit('update:modelValue',b)
}
</script>
3、修改父组件的数组对象
这个数组对象是指Array对象
在方法二上套个 [ ] 就行,这个方法使用起来比较宽松
这个方法在父组件可以用 ref 或 reacitve 来定义响应数据
在子组件接收时可以只接收props就行,甚至emit不用都可以,直接通过props传过来的对象修改
//父组件
<template>
<CustomInput v-model="message" /> {{ message }}
</template>
<script setup>
import { ref } from 'vue'
import child from './child.vue'
// 修改父组件Array对象,可以用ref,也可以用reactive
const message = ref([{name:'张三'}])
</script>
//子组件
<template>
<div>{{modelValue}}</div>
<button @click="mode">点击修改父组件的值</button>
</template>
<script setup>
const { modelValue } = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
//这时就可以直接修改了,emit的第二参数都不用写了,
//甚至你连emit都不用接收和使用,不知道是什么,可能是双向绑定数据了
const mode = ()=>{
let one = modelValue[0]
one.name = 2
//下面这个可写可不写
emit('update:modelValue')
}
</script>