Vue 父子组件双向绑定传值

最简单的双向绑定（单文件中）就是表单元素的v-model了，如果同时设置v-model和value，value属性无效。

自定义v-model：（不推荐）

child:
<template><h1>{{ msg }}</h1>
</template>export default{model:{prop:'msg', // 指父组件设置 v-model 时，将变量值传给子组件的 msgevent:'parent-event' // 指父组件监听 parent-event 事件},props:{msg:String // 此处必须定义和model的prop相同的props，因为v-model会传值给子组件},mounted(){// 这里模拟异步将msg传到父组件v-model，实现双向控制setTimeout(_=>{let some = '3秒后出现的某个值'; // 子组件自己的某个值this.$emit('parent-event', some);  //通过 emit 触发parent-event，将some传递给父组件的v-model绑定的变量}, 3000);}
}
</script>

parent:
<template><children v-model="parentMsg"></children>
</template>
<script>
import children from './children.vue';
export default{components:{children},data(){return{parentMsg:'test'}},watch:{parentMsg(newV, oldV){console.log(newV,oldV);//三秒后控制台会输出//'3秒后出现的某个值','test'}}
}
</script>

自定义多个双向值(推荐)：.sync修饰符

child:
<template><h1>{{ msg }}</h1>
</template>
<script>export default{props:{msg:String},mounted(){setTimeout(_=>{this.$emit('update:msg',some);},3000);}
}
</script>

parent:
<template><children :msg.sync="parentMsg"></children><!-- 此处只需在平时常用的单向传值上加上.sync修饰符 -->
</template>
<script>
import children from './children.vue';
export default{components:{children},data(){return{parentMsg:'test'}},watch:{parentMsg(newV,oldV){console.log(newV,oldV);}}
}
</script>

链接：https://juejin.im/post/5b5c2d986fb9a04f897840ac
来源：掘金

Vue 父子组件双向绑定传值相关推荐

[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）
Vue父组件访问子组件属性和方法.父子组件双向绑定(两种方法) 1. 使用vue-cli创建项目目录结构如下图: 2. 编写代码 src/components/HelloWorld.vue < ...
vue父子组件之间的传值，及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的 a.父子组件之间通过props b.子父组件之间通过$emit 2.简单demo描述父组件包含一个点击按钮,用于改变子组件的显示与隐藏: 子组件只有一 ...
vue实现组件双向绑定
// test.vue<template><div><input v-model="val"><testComponent v-model ...
vue 父子组件之间的传值
1.父子组件传值(父组件传值给子组件需要子组件用props接收值) 父传子:当子组件作为标签在父组件中使用的时候(子组件不可修改父组件传过来的值) 传递:需要在子组件标签上用v-bind(或者:)来 ...
vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
vue父子组件传值的一些坑（深浅拷贝）
本文章转载:https://www.yht7.com/news/116487 1.问题描述父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...

Vue 父子组件双向绑定传值

Vue 父子组件双向绑定传值相关推荐

最新文章

热门文章