当前位置:首页 » 《随便一记》 » 正文

vue组件之间通信 (ref v-model 与.sync修饰符) 之三_smouns_的博客

0 人参与  2022年05月31日 09:10  分类 : 《随便一记》  评论

点击全文阅读


组件之间的传值一般涉及到父子之间(属性绑定prop接收父传值/事件绑定$emit子触发父事件),兄弟之间(事件总线)以及无直接关系的组件之间(vuex)

利用refs实现父子之间的传值通信方式,权重较高

v-model与.sync的双向数据绑定

一 . refs

1.1获取组件的实例对象

                                 ---父获取子组件实例对象

子组件标签上里  ref="xxx"

子组件的this(实例对象)====this.$refs.xxx

 <!--  父组件的template中

用ref 实现父子传值
this.$refs 传值给子组件 得到子组件的实例对象,直接调用子组件的属性和方法 
直接在父组件修改子组件的值  
Add为组件标签
 
-->
      <Add ref="add"/>
 // 父组件的js代码 methods中定义 某时机下修改

addClick() {
      // refs 传值给子组件 得到子组件的实例对象,直接调用子组件的属性和方法
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
//子组件中

data() {
    return {
    ...其他数据

      mode: 'add',
      isShow: false,
      
    }
  },

1.2.子获取父组件实例对象

                ---this.$parent===父组件的实例对象,它找到的父组件是最近的父组件

子组件标签如果是其它组件包着的就是其它组件是它的父级

如果子组件标签是原生标签包着的,它的父组件就是它所在的组件 

 submit() {
    
          // 刷新父级列表 触发父级的方法
          // 原始方式 方法绑定  :this.$emit('getData')
          
          //触发父组件中的getData()方法
         this.$parent.getData() //注意最近一级的父级 (不可在组件内)
       
      })

二 .  v-model 双向数据绑定

父子组件双向绑定(子组件无大变化,父组件中的子组件标签用v-model)

   2.1子组件标签上书写   

  • value="父组件属性"  @input="父组件属性=$event"      
  • v-model="父组件属性"   

      子组件内:
     props:['value'],  //接收父传递的值
     model:{
         prop:'传入的属性名,默认是value,当传递的属性不是value时,需要以此改值',
         event:'绑定的事件名,默认是input,当传递的事件名不是input时,需要以此改值'
     },
      props单向数据流:栈不可修改,堆可以修改
      基本数据类型不可修改,复杂数据类型,只要不改变它的引用地址(栈),它的值随便修改

      this.$emit('input',实参值)   //触发父组件的方法改值


三 .    .sync修饰符 实现双向数据绑定
      

   子组件标签  

  •  :属性名="父组件属性"   @update:属性名="父组件属性=$event"
  •  :属性名.sync="父组件属性"

   子组件内
     props:['属性名']
     触发:this.$emit('update:属性名',实参值)


点击全文阅读


本文链接:http://zhangshiyu.com/post/41063.html

组件  属性  绑定  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 凛月栖春山完结(关凛月程衍)全书免费_(关凛月程衍)凛月栖春山完结后续(关凛月程衍)
  • 放弃救赎师尊后,看他尸骨无存我笑了精彩章节试读_「师尊林云玉骨琴」全章节免费阅读
  • 春到南楼雪尽处(傅庭州苏枝夏)全书免费_(傅庭州苏枝夏)春到南楼雪尽处后续(傅庭州苏枝夏)
  • 完结文常梨厉晏舟列表_完结文常梨厉晏舟
  • 重返1977:从成为***状元开始剧情悬念章节分段解锁_「高远李健群」完结版全文
  • (番外)+(全书)君心如竹,此生荒芜结局+番外(沈南音贺方竹)完结_(沈南音贺方竹)列表_笔趣阁(君心如竹,此生荒芜结局+番外)
  • 剜月寄无书结局+番外(姜若凝楚淮舟)_(剜月寄无书结局+番外)列表_笔趣阁(姜若凝楚淮舟)
  • 剜月寄无书免费赏析(姜若凝楚淮舟)_剜月寄无书免费赏析姜若凝楚淮舟
  • (番外)+(全书)(瀛洲晚晚)_反派暴君难攻略全书+后续列表_笔趣阁(瀛洲晚晚)(瀛洲晚晚)完结_(瀛洲晚晚)列表_笔趣阁(反派暴君难攻略全书+后续)
  • 江宁夏寻寒彦(江宁夏寻寒彦+结局+番外)_(江宁夏寻寒彦)列表_笔趣阁(江宁夏寻寒彦+结局+番外)
  • 「老婆拿着她妈救命钱和初恋泡温泉」全章节免费阅读_赵琳阿泽陈泽情感冲突名场面试读章
  • [婚书难寄,无岸之秋]限时免费章节抢先看_顾向阳陈西颜枝全集阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1