vue中的ref和$refs的使用

Posted 2021-02-28 yetiezhu

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

ref 有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

普通的DOM元素上使用

<div id="app7">
  <input type="text"ref="TEXT"/ >
  <button @click="add">添加</button>
</div>

var app7=new Vue({
  el:"#app7",
  data:{
 
  },
  methods:{
    add:function(){
      console.log(this.$refs);
    }
  }
})

　　

子组件上使用

<div id="app7">
  <aaa ref=inputText></aaa>
  <input type="text"ref="TEXT" >
  <button @click="add">添加</button>
</div>
Vue.component(‘aaa‘,{
   template:"<div>我是一个组件</div>"
 })
 var app7=new Vue({
   el:"#app7",
   data:{
 
   },
   methods:{
     add:function(){
       console.log(this.$refs.inputText);
       console.log(this.$refs);
     }
   }
 })
 var aaa=app7.$refs.inputText;
 //console.log(aaa);
 //console.log(aaa.$el.innerText);

　

refs只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

 

 

例：我做增删改查， 模态框单独分成了一个组件， 在父组件中如何调用子组件的 方法，而且传数据到子组件，

一、首先先定义一个子组件，并引入

<listEditDialog ref="editDialog"></listEditDialog>
//这是父页面，引用了listEditDialog 子组件 定义了一个ref属性

　

二、假如我使用了一个表格， 里面有个修改的按钮

 <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
        <el-table-column prop="title" label="标题" width="120"></el-table-column>
        <el-table-column label="图片" width="120">
          <div slot-scope="scope" class="Img">
            <img :src="scope.row.bannerUrl" alt />
          </div>
        </el-table-column>
        <el-table-column prop="mark" label="备注" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="300"></el-table-column>
        <el-table-column prop="sort" label="排序" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="120" :formatter="formStatus"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="editBefore(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

　　

三、点击编辑，调用子组件的方法，并且把这一行的数据传给子组件

methods: {
    editBefore(row) {
      this.$refs.editDialog.edit(row);　　//这里使用$refs  editDialog是上面定义的ref名字，  edit是子组件的方法名字    row是吧数据传给子组件模态框。  这一句话就实现了父组件调用了子组件的方法并且传了数据给子组件

} },

　　

四、子页面的代码

methods: {

edit(row) {
      console.log(row)
      this.dialogFormVisible = true;
}
}