数据未从子数据传递到父道具答案

【问题标题】：Data not being passed from Child Data to Parent Props数据未从子数据传递到父道具
【发布时间】：2021-10-18 13:26:26
【问题描述】：

我有一个请求表单组件，在这个请求表单组件中我有一个下拉菜单组件，我将在下面链接这两个组件。点击提交按钮后，我表中的所有值都会被推送到一个对象中。但是，我的下拉选择只会被我的 console.log 拾取，而不是被推送到对象中。

我对 Vue 不太熟悉，所以我不确定要解决这个问题的方向。我将在下面附上相关的 (?) 代码。

父组件：

 <SelectComponent :selected="this.selected" @change="updateSelectedValue" />


   export default {
  fullScreen: true,
  name: 'CcRequestForm',
  mixins: [BaseForm],

   name: "App",
  components: {
    SelectComponent,
  },
  data() {
    return {
      selected: "A",
    };
  },

  props: {
    modelName: {
      default: 'CcRequest',
    },

    parentId: {
      type: Number,
      default: null,
    },
  },

  mounted() {
    this.formFields.requester.value = this.currentRequesterSlug;
  },

  destroyed() {
    if (!this.modelId) return;
    let request = this.currentCcRequest;
    request.params = request.params.filter(p => p.id)
  },

  computed: {
    ...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),
    ccTypesCollection() {
      return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
    }
  },

  methods: {
    addParam() {
      this.addFormFields(['params'], {
        slug: '',
        name: '',
        isRequired: true,
        description: '',
        typeSlug: '',
        selected: ''
      });
    },

    deleteParam(idx){
      this.removeFormFields(['params', idx]);
    },

    restoreParam(idx){
      this.restoreFormFields(['params', idx])
    },

    $newObject() {
      return  {
        slug: '',
        name: '',
        isAbstract: false,
        requester: '',
        description: '',
        status: 'inactive',
        params: [],
        selected: ''
      };
    },

    $extraPrams() {
      return {
        parentId: this.parentId,
      };
    },
     updateSelectedValue: function (newValue) {
      this.selected = newValue;
    },
  },
  
  watch: {
    selected: function (val) {
      console.log("value changed", val);
    },
  },
};

子组件：

    <script>
export default {
  name: "SelectComponent",
  props: {
    selected: String,
   },
   computed: {
    mutableItem: {
      get: function () {
        return this.selected;
      },
      set: function (newValue) {
        this.$emit("change", newValue);
      },
    },
  },
};

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您必须在父组件中定义 emit 属性，否则它将不知道会发生什么。看起来像：

 <SelectComponent :selected="this.selected" @update-selected-value="updateSelectedValue" />

【讨论】：

【解决方案2】：

要更新对象内部的选定属性，在这个星座中，您需要在接收到事件时手动更新对象属性，在 updateSelectedValue 方法内。其他方式可能是创建一个计算属性，因为它是响应式的，包装“选定”属性。

computed: { 
           selectedValue () {
                    return this.selected
           }
 }

在对象内部，使用 selectedValue 而不是 selected：

 return  {
  ...
  selected: selectedValue
 }

【讨论】：