vue ref介绍
基本用法ref 有三种用法:1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 第1,2种情况 this.$refs 获取了所有设置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. a t t r s 里 面 为 g r a n d I d : 1 , 我 们 使 用 v − b i n d = " t h i s . 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开源的后台管理系统的时候,常常看到这些快捷写法,大家不要慌。百度一下,完事大吉
更多推荐
所有评论(0)