如何将 v-model 从子组件传递到 vue 中的父组件？答案

【问题标题】：How can I pass v-model from a child component to parent component in vue?如何将 v-model 从子组件传递到 vue 中的父组件？
【发布时间】：2022-08-20 17:21:56
【问题描述】：

我使用 vue 版本 2

我的父组件是这样的：

<template>
  ...
      <page-heading
        :searchChange=\"searchChange\"
      ></page-heading>

  ...
</template>

<script>
import PageHeading from \"@/views/app/report/PageHeading\";

export default {
  components: {
    \"page-heading\": PageHeading
  },
  methods: {
    searchChange(val) {
      console.log(\'test search\')
      console.log(val)
      console.log(this.selectedDate)
    }
  }
};
</script>

我的子组件是这样的：

<template>
    ...
        <b-form-group>
            <Datepicker
            range
            v-model=\"selectedDate\"
        />
        </b-form-group>
        <b-button type=\"submit\" @click=\"searchChange(val)\">Search</b-button>
    ...
</template>
<script>
import \'vue-datepicker-ui/lib/vuedatepickerui.css\';
import VueDatepickerUi from \'vue-datepicker-ui\';

export default {
  components: {
    Datepicker: VueDatepickerUi
  },
  props: [
    \"searchChange\",
  ],
  data() {
    return {
      selectedDate: [
        new Date(),
        new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)]
    };
  },

};
</script>

单击搜索按钮时，我想从子组件中获取 selectedDate。所以在父组件中，我可以读取 selectedDate

我怎么做？

请帮忙。谢谢

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

您可以将 $emit 方法用于父组件，并将 selectedDate 作为子组件中的值：

<template>
    ...
        <b-form-group>
            <Datepicker
            range
            v-model="selectedDate"
        />
        </b-form-group>
        <b-button type="submit" @click="search">Search</b-button>
    ...
</template>
<script>
import 'vue-datepicker-ui/lib/vuedatepickerui.css';
import VueDatepickerUi from 'vue-datepicker-ui';

export default {
  components: {
    Datepicker: VueDatepickerUi
  },
  props: [
    "search",
  ],
  data() {
    return {
      selectedDate: [
        new Date(),
        new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)]
    };
  },
methods:{
  search(){

   this.$emit('on-search',this.selectedDate);
  }
}

};
</script>

在父级中为on-search 事件添加一个处理程序：

<template>
  ...
      <page-heading
        @on-search="search"
      ></page-heading>

  ...
</template>

<script>
import PageHeading from "@/views/app/report/PageHeading";

export default {
  components: {
    "page-heading": PageHeading
  },
  methods: {
    search(val) {
      console.log('test search')
      console.log(val)
   
    }
  }
};
</script>

或者您可以使用this answer 中的两种方式绑定

【讨论】：

我更新我的问题。没有 searchChange 方法。仅搜索方法
我试试你的脚本，存在错误：Property or method "val" is not defined on the instance but referenced during render
我看到存在 searchChange 方法。应该只搜索方法
请检查我编辑的答案
存在错误Computed property "search" was assigned to but it has no setter.