vue 自定义组件 v-model双向绑定、 父子组件同步通信

简介: 转载自: https://www.cnblogs.com/gsgs/p/7294160.html前言: 父子组件通信,都是单项的,很多时候需要双向通信。

转载自: https://www.cnblogs.com/gsgs/p/7294160.html

前言: 父子组件通信,都是单项的,很多时候需要双向通信。方法如下:

1、父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx')

2、父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身。

3、父组件使用: v-model

第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上。

第一种、sync方式

// 父组件:
    <template>
  <div>
    <aa class="abc" :snycTest.sync="test" ></aa>
      {{'外面的值:' + test}}
    <button @click="fn">
      外面改变里面
    </button>
     
  </div>
</template>
 
<script>
import aa from './test.vue'
  export default {
    data () {
      return {
        test: ''
      }
    },
    methods: {
      fn () {
        this.test += 1
      }
    },
    components:{
      aa
    }
  }
</script>

// 子组件:
 <template>
  <div>
    <ul>
      <li>{{'里面的值:'+ snycTest}}</li>
      <button @click="fn2">里面改变外面</button>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      snycTest: ''
    },
    methods: {
      fn2 () {
        this.$emit('update:snycTest', this.snycTest+1) //这儿是关键 update:snycTest 自定义事件会告诉父组件将父组件的 test值改为this.snycTest+1,并传回给子组件。
} } } </script>

第二种、v-model方式

// 父组件:
 <template>
  <div>
    <aa class="abc" v-model="test" ></aa>  // 组件中使用v-model
      {{'外面的值:' + test}} // 这儿试验test与内部msg值为双向绑定关系
    <button @click="fn">
      外面改变里面
    </button>
    
  </div>
</template>

<script>
import aa from './test.vue'
  export default {
    data () {
      return {
        test: ''
      }
    },
    methods: {
      fn () {
        this.test += 1 
      }
    },
    components:{
      aa
    }
  }
</script>

// 子组件写法一:
<template>
  <div>
    <ul>
      <li>{{'里面的值:'+ msg}}</li>
      <button @click="fn2">里面改变外面</button>
    </ul>
  </div>
</template>

<script>
  export default {
    model: {    // 使用model, 这儿2个属性,prop属性说,我要将msg作为该组件被使用时(此处为aa组件被父组件调用)v-model能取到的值,event说,我emit ‘cc’ 的时候,参数的值就是父组件v-model收到的值。
      prop: 'msg',
      event: 'cc'
    },
    props: {
      msg: ''
    },
    methods: {
      fn2 () {
        this.$emit('cc', this.msg+2)
      }
    }
  }
</script>

//  子组件写法二:
<template>
 <div>
    <ul>
      <li>{{'里面的值:'+ value}}</li> // 组件使用时有v-model属性,value初始传的‘what’ 不会被渲染,而是v-model绑定的test值被渲染,这儿value会被重新赋值为v-model绑定的test的值。
      <button @click="fn2">里面改变外面</button>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      value: { // 必须要使用value
     default: '',
    },
    },

    methods: {
      fn2 () {
        this.$emit('input', this.value+2) // 这儿必须用input 发送数据,发送的数据会被父级v-model=“test”接受到,再被value=test传回来。
      }
    }
  }
目录
相关文章
|
30天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
135 59
|
4天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
21 1
|
4天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
21 1
|
24天前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
27 1
|
19天前
|
API
vue3中父子组件的双向绑定defineModel详细使用方法
vue3中父子组件的双向绑定defineModel详细使用方法
191 0
|
19天前
|
人工智能 JavaScript 程序员
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
88 0
|
2月前
|
JavaScript
Vue3基础(23)___vue3非父子组件之间的通信
本文介绍了Vue 3中非父子组件间通信的方法,通过创建一个事件集合对象和相应的触发监听函数,实现跨组件的事件传递和监听。
36 0
|
8天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
1天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex