vue 子组件获取并修改父组件的数据

vue 子组件获取并修改父组件的数据

1. 父组件在使用子组件的时候，可以通过动态绑定属性值，将数据传递给子组件

   <date :start_date="start_date" :end_date="end_date"></date>
   

2. 子组件通过 props 接收父组件传递过来的数据

   props: {
      start_date: {
         type: String,  // 数据类型
         default: ''  // 默认值
       },
       end_date: {
         type: String,
         default: ''
       }
   }
   

3. 父组件的数据发生变化时，会传递给子组件， 但子组件无法直接更改父组件的数据，如果想要修改父组件的数据，要使用 this.$emit()
   方法来触发父组件的方法，从而让父组件修改自己的数据。

   // 父组件通过 @changexxx = "fun" 的方式绑定要触发的方法
   <date :start_date="start_date" :end_date="end_date" @changeStart="changeStartDate" @changeEnd="changeEndDate"></date>
   <script>
   methods: {
   	changeStartDate(value) {
         this.start_date = value;
       },
       changeEndDate(value) {
         this.end_date = value;
       }
   }
   </script>
   
   // 子组件
   <script>
   	methods: {
   	handleChangeStart(date) {
   	      // this.start_date = date; 这句话写了会报错，提示不能修改prop里的数据
   	      this.$emit('changeStart', this.start_date);
   	      // 第一个参数一定要和父组件绑定的 `changexxx` 同名，第二个参数传递给父组件作为参数
   	    },
   	}
   </script>
   

这样我们看到的就是修改过的数据了

附：源代码
父组件：

<template>
		<date :start_date="start_date" :end_date="end_date" @changeStart="changeStart" @changeEnd="changeEnd"></date>
</template>
<script>
import date from '../../components/date.vue'
export default {
	data() {
		return {
			start_date: '2020-11-27',
	      		end_date: '',
			}
		}
		components: {
			date
		}
	}
	</script>

子组件 date.vue

<template>
  <div>
    <p class="pull-left input-group marT2">
      <DatePicker type="date" 
        :value="start_date" 
        format="yyyy-MM-dd" 
        :clearable="false"
        :editable="false"
        :confirm="false"
        @on-change="handleChangeStart"
        style="width: 120px">
      </DatePicker>
    </p>
    <span class="pull-left marT10 pad0_10">—</span>
    <p class="pull-left marT2 input-group">
      <DatePicker type="date" 
        :value="end_date" 
        format="yyyy-MM-dd" 
        :clearable="false"
        :editable="false"
        :confirm="false"
        style="width: 120px"
        @on-change="handleChangeEnd"
        >
      </DatePicker>
    </p>
  </div>
</template>

<script>
// import { DatePicker } from 'view-design'
export default {
  props: {
    start_date: {
      type: String,
      default: ''
    },
    end_date: {
      type: String,
      default: ''
    }
  },
  // components: {
  //   DatePicker
  // },
  methods: {
    handleChangeStart(date) {
      this.start_date = date;
      this.$emit('changeStart', this.start_date);
    },
    handleChangeEnd(date) {
      this.end_date = date;
      this.$emit('changeEnd', this.end_date);
    },
  }
}
</script>