Vue中实现父子组件双向数据流的三种方案分享

<template>
  <div class="container">
    <a-button type="primary" @click="handleClick">改变子组件的状态</a-button>
    <p>父组件状态：{{ message }}</p>
    <!-- 子组件 -->
    <child-view v-model="message"></child-view>
		<!-- 也可以使用多个v-model，子组件里面用props正常接收就可以了 -->
		<!-- <child-view v-model:message="message" v-model:msg="msg"></child-view> -->
  </div>
</template>
<script>
import ChildView from '@/components/ChildView.vue'
export default {
  name: 'HomeView',
  components: {
    ChildView
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    handleClick () {
      this.message = '我是用v-model修改的状态'
    }
  }
}
</script>

<template>
  <div>
    <a-button type="primary" @click="handleClick">改变父组件的状态</a-button>
    <p>子组件状态：{{ value }}</p>
  </div>
</template>
<script>
export default {
  props: {
    // 这里框架默认属性名就是value
    value: {
      type: String,
      default: ''
    },
    // 接收多个props
    message: {
      type: String,
      default: ''
    },
    msg: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick () {
      // 这里框架默认事件名就是input
      // 发送的数据会被父级v-model="message"接收到，再被value=message传回来
      this.$emit('input', '我是在子组件里面修改父组件v-model的值')
    }
  }
}
</script>

<template>
  <div>
    <a-button type="primary" @click="handleClick">改变父组件的状态</a-button>
    <p>子组件状态：{{ msg }}</p>
  </div>
</template>
<script>
export default {
  // 自定义prop名称和事件
  model: {
    prop: 'msg',
    event: 'update'
  },
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick () {
      this.$emit('update', '我是在子组件里面修改父组件v-model的值')
    }
  }
}
</script>

<template>
  <div class="container">
    <a-button type="primary" @click="handleClick">改变子组件的状态</a-button>
    <p>父组件状态：{{ message }}</p>
    <child-view :msg.sync="message"></child-view>
  </div>
</template>
<script>
import ChildView from '@/components/ChildView.vue'
export default {
  name: 'HomeView',
  components: {
    ChildView
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    handleClick () {
      this.message = '十里平湖霜满天'
    }
  }
}
</script>

<template>
  <div>
    <a-button type="primary" @click="handleClick">改变父组件的状态</a-button>
    <p>子组件状态：{{ msg }}</p>
  </div>
</template>
<script>
export default {
  props: {
    msg: String
  },
  methods: {
    handleClick () {
      this.$emit('update:msg', '寸寸青丝愁华年')
    }
  }
}
</script>

<template>
  <div class="container">
    <a-button type="primary" @click="handleClick">改变子组件的状态</a-button>
    <p>父组件状态：{{ config.message }}</p>
    <child-view :config="config"></child-view>
  </div>
</template>
<script>
import ChildView from '@/components/ChildView.vue'
export default {
  name: 'HomeView',
  components: {
    ChildView
  },
  data () {
    return {
      config: {
        message: ''
      }
    }
  },
  methods: {
    handleClick () {
      this.config.message = '我是用v-model修改的状态'
    }
  }
}
</script>