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

Posted 2021-12-15 smouns_

组件之间的传值一般涉及到父子之间(属性绑定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:属性名',实参值)