基本用法
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开源的后台管理系统的时候，常常看到这些快捷写法，大家不要慌。百度一下，完事大吉
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
评论(0)