vue使用refs获取嵌套组件中的值过程

目录
  • 使用refs获取嵌套组件的值
  • vue使用ref的好处

使用refs获取嵌套组件的值

功能简介：

1、父组件包含zujian1，而zujian1又包含zujian2

2、zujian2绑定一个输入参数

<input  ref="query" v-model="query" @keypress="doSearch"/>

3、父组件获得输入框中的值，通过this.$refs.组件名来获取dom元素，多层嵌套，要调多次

 // 记录输入框的值 this.inputValue=this.$refs.zujian1.$refs.zujian2.query

vue使用ref的好处

当我们需要在 JavaScript 中直接访问子组件。

为此可以使用 ref 为子组件指定一个引用 ID

<div id="parent">
  <p ref="profile" id="profile"></p>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件实例
var child = parent.$refs.profile
console.log(child )// <p ref="profile" id="profile"></p>

这与document.getElementById(“profile”)获取dom节点的作用是一样的，但使用ref会减少获取dom节点的消耗

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

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

赞 (0)

相关推荐

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • Vue 解决通过this.$refs来获取DOM或者组件报错问题

    1.关于this.$refs的使用场景 如果ref属性加在普通元素上,那么this.$refs.name则指向该DOM元素 <p ref="p">hello</p> <!-- this.$refs.p 指向该DOM元素 --> 如果ref属性加在组件上,那么this.$refs.name指向该组件实例 <child-component ref="child"></child-component> <!

  • Vue 实例中使用$refs的注意事项

    Vue 实例中使用$refs的注意事项

    在开发过程中,经常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件,并进行相应操作,但存在取不到元素的情况,其根本原因是因为$refs只能取得mounted(渲染)之后的元素. 例如,在这种情况中,若flag从真值切换到假值取不到节点是正常的,因为v-if如果为假值,那么该节点不会被渲染. 但如果从假值切换到真值时,也可能取不到节点,这是因为渲染需要时间,通常可以使用$nextTick()解决. ... <el-table v-if="flag" r

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • vue使用refs获取嵌套组件中的值过程

    vue使用refs获取嵌套组件中的值过程

    目录 使用refs获取嵌套组件的值 vue使用ref的好处 使用refs获取嵌套组件的值 功能简介: 1.父组件包含zujian1,而zujian1又包含zujian2 2.zujian2绑定一个输入参数 <input ref="query" v-model="query" @keypress="doSearch"/> 3.父组件获得输入框中的值,通过this.$refs.组件名来获取dom元素,多层嵌套,要调多次 // 记录输入框的

  • Vue父组件如何获取子组件中的变量

    在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示 注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • vue中子组件的methods中获取到props中的值方法

    父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top></head-top> <section class="data_section"> <header class="chart-title">数据统计</header> <el-row :gutter=&

  • Vue $emit $refs子父组件间方法的调用实例

    1.$emit 子组件调用父组件的方法并传递数据 注意:子组件标签中的时间也不区分大小写要用"-"隔开 子组件: <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods:

  • vue前端开发层次嵌套组件的通信详解

    vue前端开发层次嵌套组件的通信详解

    目录 前言 示例 小结 前言 vue父子组件之间通过props很容易的将父组件的值传递给子组件,如果一个组件嵌套很多层,每一层之间度需要同props进行传值,很麻烦,且不易维护 示例 [示例]A组件中使用了B组件,B组件中使用了C组件,C组件需要使用A组件的数据text及使用A组件的方法getmethod.A组件代码如下: <template> <div> <P>这是A组件</P> <v-comb></v-comb> </div

  • Vuex如何获取getter对象中的值(包括module中的getter)

    Vuex如何获取getter对象中的值(包括module中的getter)

    目录 Vuex获取getter对象中的值 1.直接从根实例获取 2.使用mapGetters取值 3.使用module中的getter 计算属性获取的getter值需要刷新才能更新 描述 解决 Vuex获取getter对象中的值 getter取值与state取值具有相似性 1.直接从根实例获取 // main.js中,把store注册在根实例下,可使用this.$stroe.getters直接取值 computed: {   testNum1() {     return this.$store

  • PHP获取input输入框中的值去数据库比较显示出来

    前端: <!--商品查询--> <input type="text" name="bianhao" value="" maxlength="10" size="10" style="width:100px; margin:0px 0px 0px 25px;height:20px;"/> <input type="submit" value

  • jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME"> 一.jquery获取input文本框中的值 通过 name var name = $('input[name="CN_NAME&

随机推荐