vue 生成组件，以及组件之间的通信

组件之间的通信 

父子组件之间的值是单向的，需要传值和监听

参考，父传子，子传父，子传子（兄弟之间）

https://www.cnblogs.com/chen-yi-yi/p/11152391.html

父组件传值子组件

父组件传值

<mm-picker-date :datePicker="datePicker" :selectDate="selectDate" :tsDate="tsDate"></mm-picker-date>

子组件接受值

props:['datePicker','tsDate','selectDate'],

子组件不能给 props直接赋值，只能通过计算属性或者通过其他值赋值，最后再传值给父组件修改

子组件传值父组件

子组件传值

// 传值给父组件
this.$emit("select-picker-date", this.objPD, true);

父组件接收值

<mm-picker-date  @select-picker-date="pickerDateEvent" ></mm-picker-date>

methods: {
        // 接收时间组件的值
        pickerDateEvent(data){
            // data 为子组件 this.objPD
            console.log(data) 
        },
    },        

父组件html

<template>
  <div>
        <van-cell :value="selectDate" is-link @click="datePicker = true">
          <template #title>
            <span class="custom-title">上门时间</span>
            <span class="serve-span-important">*</span>
          </template>
        </van-cell>
        <!-- 时间 -->
        <mm-picker-date :datePicker="datePicker" :selectDate="selectDate" :tsDate="tsDate"  @select-picker-date="pickerDateEvent" ></mm-picker-date>
  </div>
</template>

<script>
// 引入时间选择组件
import mmPickerDate from "@/view/serve/component/mmPickerDate"
  export default {
    name:'',
    data () {
      return {
          datePicker: false,  // 是否显示时间选择器
          selectDate:'', // 选择的日期
          tsDate:"请选择上门时间",  // 多了这个参数是为了验证是否选择上门时间
      };
    },
    components: {
        // 注册组件
        mmPickerDate
    },
    created(){
      //赋初始值
      this.selectDate = this.tsDate; 
    },
    methods: {
        // 接收时间组件的值
        pickerDateEvent(data){
            this.selectDate = data.text;
            this.datePicker = data.showPicker;
        },
    },
  }

</script>

子组件html

<template>
  <div>
    <van-popup v-model="objPD.showPicker"  position="bottom" @click-overlay="dateCancel">
          <van-picker
            show-toolbar
            :columns="dateList"
            @cancel="dateCancel"
            @confirm="dateConfirm"
          />
    </van-popup>
  </div>
</template>

<script>

  export default {
    name:'',
    // 是否显示选择器，默认提示文字，当前选择时间
    props:['datePicker','tsDate','selectDate'],
    data () {
      return {
        dateList: [{
            text: '今天',
            children: [{text: '9:00-11:00'}, { text: '11:00-13:00'},{ text: '14:00-15:00'},{ text: '16:00-17:00'},{ text: '17:00-18:00'}]
        },
        {
            text: '明天',
            children: [{text: '9:00-11:00'}, { text: '11:00-13:00'},{ text: '14:00-15:00'},{ text: '16:00-17:00'},{ text: '17:00-18:00'}]
        }],
        // 传给父组件的值
        objPD:{
          showPicker: this.datePicker, //是否展示当前选择器
          // text:'', // 日期
        }
      };
    },
    methods: {
        // 确定按钮操作
        dateConfirm(text, index) {
            // this.$toast(`当前值：${text}, 当前索引：${index}`);
            this.objPD.text = text.toString();
            this.objPD.showPicker = false;
            // 传值给父组件
            this.$emit("select-picker-date", this.objPD, true);
        },
        // 取消按钮操作
        dateCancel(){
          // 若已选日期则记录该日期，反之则显示提示文字
          if(this.selectDate == this.tsDate){
            this.objPD.text = this.tsDate;
          }
          else{
            this.objPD.text = this.selectDate;
          }
          this.objPD.showPicker = false
          // 传值给父组件
          this.$emit("select-picker-date", this.objPD, true);
        }
    },

    watch: {
      // 监听是否显示日期选择器
      datePicker(val){
        this.objPD.showPicker = val;
      }
    }

  }

</script>