小程序模板市场_Vue父子组件双向绑定传值的完成

发布时间:2021-01-08 13:46 作者:jianzhan

摘要: Vue父子俩部件双重关联传值的完成方式 父子俩部件中间的双重关联十分简易,可是许多人由于是以Vue 2+刚开始应用的,将会不知道道怎样双重关联,接下去根据文中给大伙儿详细

Vue父子组件双向绑定传值的实现方法       父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,接下来通过本文给大家介绍Vue父子组件双向绑定传值的实现方法,需要的朋友可以参考下

父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 input type="text" / 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效。

父子组件的自定义双向 v-model

当若干dom封装成组件时,在父组件中使用子组件时,却无法在子组件标签上使用 v-model ,因为子组件标签不是表单元素,这个时候,我们需要自定义我们想要的 v-model 规则。

 !-- children.vue -- 
 template 
 h1 {{ msg }} /h1 
 /template 
 script 
export default{
 model:{
 prop:'msg',//这个字段,是指父组件设置 v-model 时,将变量值传给子组件的 msg
 event:'parent-event'//这个字段,是指父组件监听 parent-event 事件
 pro凡科抠图:{
 msg:String //此处必须定义和model的prop相同的pro凡科抠图,因为v-model会传值给子组件
 mounted(){
 //这里模拟异步将msg传到父组件v-model,实现双向控制
 setTimeout(_= {
 let some = '3秒后出现的某个值';//子组件自己的某个值
 this.$emit('praent-event',some);
 //将这个值通过 emit 触发parent-event,将some传递给父组件的v-model绑定的变量
 },3000);
 /script 
 !-- parent.vue -- 
 template 
 children v-model="parentMsg" /children 
 /template 
 script 
import children from 'path/to/children.vue';
export default{
 components:{
 children
 data(){
 return{
 parentMsg:'test'
 watch:{
 parentMsg(newV,oldV){
 console.log(newV,oldV);
 //三秒后控制台会输出
 //'3秒后出现的某个值','test'
 /script 

你学会组件的自定义 v-model 了吗 ? 如果是普通的表单元素,同理,监听表单的 input 或者 change 事件,实时将 value 或者 checked 通过 $emit 传递就可以了。

父子组件的自定义多个双向值

上述例子,是实现单个prop值的双向绑定,当组件的需求需要复杂的操作,需要多个双向值,是如何实现的呢。这里需要用到以前被vue抛弃,后来又回归的 .sync 修饰符。

事实上,这个比 v-model 更加简单

 !-- children.vue -- 
 template 
 h1 {{ msg }} /h1 
 /template 
 script 
export default{
 pro凡科抠图:{
 msg:String
 mounted(){
 //这里模拟异步将msg传到父组件v-model,实现双向控制
 setTimeout(_= {
 let some = '3秒后出现的某个值';//子组件自己的某个值
 this.$emit('update:msg',some);
 //将这个值通过 emit
 //update为固定字段,通过冒号连接双向绑定的msg,将some传递给父组件的v-model绑定的变量
 },3000);
 /script 
 !-- parent.vue -- 
 template 
 children :msg.sync="parentMsg" /children 
 !-- 此处只需在平时常用的单向传值上加上.sync修饰符 -- 
 /template 
 script 
import children from 'path/to/children.vue';
export default{
 components:{
 children
 data(){
 return{
 parentMsg:'test'
 watch:{
 parentMsg(newV,oldV){
 console.log(newV,oldV);
 //三秒后控制台会输出
 //'3秒后出现的某个值','test'
 /script 

此处需要注意,虽然加上 .sync 即可双向绑定,但是还是要依靠子组件 $emit 去触发 update:prop名 实现修改父组件的变量值实现双向数据流,如果直接对prop的属性直接赋值,依然会出现报错。

事实上, .sync 修饰符是一个简写,它做了一件事情

 template 
 children :msg.sync="parentMsg" /children 
 !-- 等价于 -- 
 children :msg="parentMsg" @updata:msg="parentMsg = $event" /children 
 !-- 这里的$event就是子组件$emit传递的参数 -- 
 /template 

当需要把一个对象中的属性全部通过 .sync 传入双向数据流时,可以再简便一下写法

 template 
 children :.sync="obj" /children 
 /template 
 script 
export default{
 components:{
 children
 data(){
 return{
 obj:{
 parentMsg:'test'
 /script 

当使用这种写法时,会将obj对象中的所有属性都通过独立的pro凡科抠图传递给子组件,并监听对应的 update: ,此时在子组件中也要声明对应的pro凡科抠图。

总结

以上所述是小编给大家介绍的Vue父子组件双向绑定传值的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


  • 成都市杰出游戏玩家 揭密

    笔忝 “中国香港这一拍,全国性都会看。”2016中国香港春拍的几场重磅消息专属让人入胜,就连过去其实不是最火门的高古玉、高古瓷2020年也走红销售市场。 4月五日,公然人到中国

  • 怎样创建本人网站?

    原题目:怎样创建本人网站? 目前构建一个网站早已越来越十分非常容易,除开提交静态数据网站文档到网络服务器,最经常见的便是运用各种各样建网站程序来构建网站了。 WordPre

  • 温州市“互连网+政务服务

    “不仅仅是申请办理功效,在网络上开确认、聪明伶俐心身身心健康等功效也公布了。”市绝大部分据管理方法方式管理方法管理中心担负人说。2017年,我区在泰顺县最先公布“在网络

  • 设计方案团体工业生产设

    模拟题目:设计方案计划方案团队工业生产生产制造设计方案计划方案院报考报名参加2018温州市市市环境保护环保节能宣传策划方案策划暨新技术应用运用新产品强烈推荐会 为互相相

  • 企业法定代表人租英国网

    法纪晚报讯(新闻记者 洪雪)3三岁企业法律规定意味着人刘晶晶租赁英国网络服务器运营情色网站,根据向VIPvip会员收费标准牟取暴利,在其中还包括未满十八岁人淫秽信息内容,一