自己动手建立网站3,制作网站项目实例,一站式外贸服务平台,成立软件公司一、概念
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用#xff0c;引用信息就是元素; 如果用在子组件上#xff0c;引用信息就是组件实例。
注意#xff1a;只要想要在Vue中直接操作DOM元素#xff…一、概念
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用引用信息就是元素; 如果用在子组件上引用信息就是组件实例。
注意只要想要在Vue中直接操作DOM元素就必须用ref属性进行注册
二、在dom上使用ref
ref 加在普通的元素上用this.ref.divRef 获取到的是dom元素
templatedivdiv refdivRef第一个一个普通的div/divdiv refdivRef2第二个个普通的div/divbutton clickgetRef按钮/button/div
/template
script
export default {methods: {getRef () {/*** 使用this.$refs* 拿到当前组件里所有的ref对象*/console.log(this.$refs)}}}/script
三、在组件上使用ref
ref 加在子组件上用this.ref.xxx 获取到的是组件实例可以使用组件的所有方法
templatedivQfNum refnumRef/QfNumbutton clickadd子组件1/button/div
/template
script
import QfNum from ./qf-num.vue
export default {components: {QfNum,},methods: {add () {// 可以直接获取到对应的组件状态和方法this.$refs.numRef.add()console.log(this.$refs.numRef.num)}},
};
/script
