vue3 父组件传值给子组件 子组件修改后回传给父组件

父组件#

<jdy-goods-attr v-model:goods_sn="goods.goods_sn"></jdy-goods-attr>
//尤总 在vue3的时候给我们提供了一个新的思路:v-model来实现父传子，并且子也可以修改父组件传递过来的数据。

子组件#

const props = defineProps({
  goods_sn: {
    type: String,
    default: ''
  }
})
const goods_sn = toRef(props, 'goods_sn');
const sn = ref('');
//监听goods_sn的变化
watch(goods_sn, function (newValue, oldValue) {
  sn.value = props.goods_sn;
})

const emit = defineEmits(['update:goods_sn']);
//监听sn
watch(sn, function (newValue, oldValue) {
  //修改父组件
  emit('update:goods_sn',sn.value)
})