element 点击图片切换上传

Posted 2021-09-01 嘴巴嘟嘟

我们的业务需求是 父传子，里面有图片地址，然后儿子界面显示图片并且点击图片实时切换图片，看似简单，其中需要和父元素的字段实时更新。
我是用的是vue3

 props: {
    userInfoForm: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  setup(props) {
    const state = reactive({
      submitDisable: false,
      avaterImageUrl: "",
    });
    // 事件监听
    watch(
    // 图片字段
      () => props.userInfoForm.avatar,
      (newProps) => {
        state.avaterImageUrl = newProps;
      }
    );