Vue3中的Refs和Ref

Posted 2021-11-11 飞鹰3995

小编同样和大家分享关于Vue3中的数据相应的问题，之前，我们写过这样的例子

Vue.createApp({
    template: `<div>{{ nameObj.name }}</div>`,
    setup() {
        const { reactive } = Vue
        const nameObj = reactive({name:\'lilei\',age:18})
        
        setTimeout(() => {
            nameObj.name = \'hanmeimei\'
        },2000)
        return {
            nameObj
        }
    }
}).mount(\'#root\')

这个时候我们可能联想到了es6中关于解构赋值的内容，我们是不是可以将上面例子中的nameObj通过结果解构的方式获取内部的name，然后直接将name返回呢？也就是将代码写成这样

Vue.createApp({
    template: `<div>{{ name }}</div>`,
    setup() {
        const { reactive,toRefs } = Vue
        const nameObj = reactive({name:\'lilei\',age:18})
                let { name } = nameObj
        setTimeout(() => {
            name.value = \'hanmeimei\'
        },2000)
        return {
            name
        }
    }
}).mount(\'#root\')

在实际运行中，我们发现，页面上的内容并没有变成hanmeimei，这个时候，我们需要引入Vue3中的另外一个内容，我们应该把代码修改成这样，才能实现数据和页面的响应式

Vue.createApp({
    template: `<div>{{ name }}</div>`,
    setup() {
        const { reactive,toRefs } = Vue
        const nameObj = reactive({name:\'lilei\',age:18})
        let { name } = toRefs(nameObj)
        setTimeout(() => {
            name.value = \'hanmeimei\'
        },2000)
        return {
            name
        }
    }
}).mount(\'#root\')

同样，和toRefs很类似的还有toRef，代码实例是这样的

Vue.createApp({
    template: `<div>{{ age }}</div>`,
    setup() {
        const { reactive,toRef } = Vue
        const nameObj = reactive({name:\'lilei\'})
        let age = toRef(nameObj,\'age\')
        setTimeout(() => {
            age.value = \'hanmeimei\'
        },2000)
        return {
            age
        }
    }
}).mount(\'#root\')

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈。

 

vue中的ref和$refs的使用

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;
}
}