vue的ref与$refs

一. ref使用在父组件上

父组件html：

　　<information ref=‘information‘></information>

　　import information from ‘./information‘

　　components:{information,bill,means},

在父组件上使用子组件的值，js :this.$refs.information.isAdd;   isAdd是information组件的data的属性。

二.ref使用在元素上

例如本组件html：

<p  ref="outsideDomRef">ref在外面的元素上</p>

本组件js使用：this.$refs.outsideDomRef;  //<p>ref在外面的元素上</p>

三.ref使用在子组件上

子组件上有

<h5 ref=‘insideDomRef‘>我是子组件</h5>
父组件上可以引用子组件的值：this.$refs.insideDomRef// <h5 >我是子组件</h5>

原文地址：https://www.cnblogs.com/wulinzi/p/8145425.html

时间： 2024-11-07 07:08:18

vue的ref与$refs的相关文章

Vue 操作原生Dom refs

获取原生DOM 给标签或组件 添加ref属性 <div ref='alex'></div> <p ref='a'></p> <Home ref='b'></Home> this.$refs.alex // 获取原生的Dom对象 this.$refs.b // 获取的是组件的实例化对象 refs属性集合 console.log(this.$refs.input); // 获取原生DOM // 返回值 <input type=&qu

vue通过ref获取dom节点

HTML在任意节点上添加属性"ref" <span ref="span_01">span_01</span> <button @click="consoleDOM()">consoleDOM</button> SCRIPT vue里通过 this.$refs.xxx 获取 consoleDOM() { window.console.log(this.$refs.span_01) } 原文地址:htt

vue里ref ($refs)用法

ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法. 3.如何利用 v-for 和 ref 获取一组数组或者dom 节点 注意: 1.ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成.比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用. 2.如果ref 是循环出

Vue插槽、ref和$refs用法

1.vue插槽 1.插槽的作用:以局部组件为例 插槽就是Vue实现的一套内容分发的API,将<slot></slot>元素作为承载分发内容的出口.插槽内可以是任意内容. (1)不带插槽的情况: <div id="app"> <vue> <h2>我是里面的内容</h2></vue> </div> <script> var Child = { template: '<div&g

vue中的ref 及$refs

原文地址:https://www.cnblogs.com/huangqiao/p/9753919.html

vue 里ref的使用

1. 概念介绍 https://cn.vuejs.org/v2/api/#ref  官方文档 简答说,给 “DOM元素 或 组件” , 设置一个ref , 我们就可以通过$refs 获取到 “DOM节点 或 组件内容” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ref使用</title> <

Vue组件传值、refs、插槽

一.组件传值 1.父组件向子组件传值 因为子组件本身不能拿到父组件的data数据来用,所以在子组件里用props接收,props是一个数组 父组件向子组件传值 <div id="app"> <com1 :parent="msg" :parentarr="arr"></com1> </div> <template id="com"> <div> {{pare

vue基础 ref的作用

1.  ref 获取dom元素,除了能获取dom元素也能获取组件dom, 组件通信: 在父组件中直接调用ref定义的组件的数据或者方法 <div id="app"> <p ref="mybutton"></p> <div ref="mybutton"></div> <!-- 会覆盖 --> <!--遇见循环 输出是一个数组--> <template v-fo

vue中ref在input中详解

当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model="inputval"> </template> export default { data(){ return { inputval:'', } }, watch:{ inputval(){ console.log(this.inputval) } } } 2.ref自定义一个方