vue中的ref使用及说明

基本用法

ref 有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

第1，2种情况　

this.$refs 获取了所有设置ref属性的元素（如有重名那么会被覆盖）　　

如果是普通的元素那返回的是一个普通的dom,如果ref放在vue组件里，那么返回的是一个vue对象，这个对象包含了这个组件的各种信息

第3种情况

如图所示这样使用

this.$refs.g1 获取得是vue组件对象的集合，就不覆盖了

$attrs

父子之间值传递，我们一般用的是在属性里设置，采用:prop="prop"的格式

在子级的props定义接受，然后可以直接使用，

若props里没有定义，那么可以使用this.$attrs里获取没有定义的值，

如下图

图中定义了3个属性（v-model也是个特殊的属性，在props中可以用 value来接收）

那$attrs的值是什么呢？

是除了props里已经定义接收了的传值， 就剩下了grand-id这个属性

如果还有孙子级的组件， 我们还可以用

v-bind="$attrs"

这种方式再次传递到孙子级的页面，孙子级仍然可以使用props来获取。如果不使用props，那么还可以依旧使用this.$attrs来获取，

这个相当于搭了个桥，

如上图所示，this.attrs里面为grandId:1,我们使用v−bind="this.attrs里面为{grandId:1}, 我们使用v-bind="this.attrs里面为grandId:1,我们使用v−bind="this.attrs" 同等于 v-bind:grandId=“1”.这是只有一个属性值，所以差别不大，如果有多个属性值，那就不需要我们写了。直接借你一用，把各个需要传递给子孙级的数据，直接传到了目的地

语法糖的问题

在看同事代码的时候，发现在改变子级元素的值的时候，直接去改变了父级的值。没有用vuex，没有用emit。

其实还是用了emit，只是一些语法糖

v-model

如上面所展示代码

用v-model绑定了元素，在子级里面props接收到了value的值。

用该值初始化了inputValue，并监听emit了一个input事件。

在第一幅图里 v-model里绑定的值，也跟着改变了。

相当于

还是相当于在父级上绑上了一个事件，只是为了简单写法，省略一些东西

.sync

普通属性呢？其实也有一种简单的写法。

<template>
  <div class="dashboard-container">
    {{ object }}
    <text1 v-model="object.v" :changep.sync="object.p" />
  </div>
</template>

<script>

import text1 from './text'

export default {
  components: {
    text1
  },
  data() {
    return {
      object: {
        v: 1,
        p: 2
      }

    }
  }
}
</script>

<!--
 * @Author: hanker
 * @LastEditors: hanker
 * @Description:
-->
<template>
  <div class="">
    <el-input v-model="inputValue" />
    <el-button @click="clickHandle">点击改变p</el-button>
  </div>
</template>

<script>
// import x from ''
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
      inputValue: this.value
    }
  },
  computed: {

  },
  watch: {
    inputValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {

  },
  methods: {
    clickHandle() {
      const p = '改变了对应的p'
      this.$emit('update:changep', p)
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url()

</style>

在看一些vue开源的后台管理系统的时候，常常看到这些快捷写法，大家不要慌。百度一下，完事大吉

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论