Vue自定义组件通过v-model实现父子组件双向同步通信

BoReFrontEnd

于 2019-04-18 14:21:20 发布

阅读量222

点赞数

分类专栏： Vue 文章标签： v-model vue 父子组件组件通讯

本文链接：https://blog.youkuaiyun.com/BoReFrontEnd/article/details/89377881

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了Vue.js中父子组件间的通信机制，通过具体示例讲解了如何使用v-model进行双向数据绑定，并展示了父组件如何监听子组件的输入变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
	<div>
		<child v-model="name"/>
		{{name.ab}}
		{{name.ac}}
	</div>
</template>
<script>
import child from './child'
export default {
  name: 'parent',
    components: { child },
  data () {
 	 return {
       name: {
         ab: '111',
         ac: '222'
       },
     }
  }
}
</script>

子组件

<template>
  <div v-if="value">
    <el-input v-model="value.ab" autocomplete="off" @change="handleInput" placeholder="请输入客户姓名"></el-input>
  </div>
</template>

<script>
  export default {
    name: 'child',
    data () {
      return {
      }
    },
    model: {
      prop: 'value', // prop说:我要将value作为该组件被使用(被父组件调用)时,v-model能取到的值
      event: 'change' // event说:我emit(触发)change的时候，参数的值就是父组件v-model收到的值。
    },
    props: {
      value: Object
    },
    methods: {
      handleInput (e) {
        this.$emit('change', this.value)
      }
    }
  }
</script>