组件封装v-model .sync在父子组件中实现双向数据绑定 如何处理单向数据流

使用watch监听

父组件使用.sync进行数据的绑定 传值子组件时 把值赋值到data的变量中 然后监听该数据的变化 $emit抛出

父组件demo

<template>
  <div>
    <Son :model-value.sync="modelValue" :select-value.sync="selectValue" />
  div>
template>

<script>
import Son from './son.vue'
export default {
  name: 'Father',
  components: {
    Son
  },
  props: {

  },
  data() {
    return {
      modelValue: '789',
      selectValue: '1'
    }
  }

}
script>

<style lang="scss" scoped>

style>

子组件

<template>
  <div>
    <div style="margin-top: 15px;width: 600px;">
      <el-input v-model="sonInputValue" placeholder="请输入内容" class="input-with-select">
        <el-select slot="prepend" v-model="sonSelectValue" placeholder="请选择" style="width: 100px;">
          <el-option label="餐厅名" value="1" />
          <el-option label="订单号" value="2" />
          <el-option label="用户电话" value="3" />
        el-select>
        <el-button slot="append" icon="el-icon-search" />
      el-input>
    div>
  div>
template>

<script>
export default {
  name: 'Son',
  // 父组件传递过来的值
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    selectValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 子组件绑定的值
      sonInputValue: this.modelValue,
      sonSelectValue: this.selectValue
    }
  },
  watch: {
    // 当子组件绑定的值发生变化时 抛给父组件
    sonInputValue() {
      this.$emit('update:modelValue', this.sonInputValue)
    },
    sonSelectValue() {
      this.$emit('update:selectValue', this.sonInputValue)
    }
  }
}
script>

<style lang="scss" scoped>

style>

展示效果