15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

Vue中ref的用法与演示

梁鹏翱| 发布于 2021-11-27 11:59:48| 626阅读| 0点赞| 0评论
举报

Vue中ref的用法与演示

vue中ref的用法

ref 定义:被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上。

  • 如果是在普通的dom元素上使用,引用指向的就是dom元素;
  • 如果用在子组件上,引用指向的就是组件实例。
举例:
  组件1:
<template>
  <div>
      我是{{name}}
  div>
template>

<script>
export default {
    name:'Cpn1',
    data() {
        return {
            name:'组件1'
        }
    },
}
script>

组件2:

<template>
  <div>我是{{name}}div>
template>

<script>
export default {
    name:'Cpn2',
    data() {
        return {
            name:'组件2'
        }
    },
}
script>

app.vue

<template>
  <div id="app">
    <cpn-1 ref="c1">cpn-1>
    <cpn-2 ref="c2">cpn-2>
    <button @click="showDom">按钮button>
    <h2 ref="title">我是标题h2>
    <input type="text" ref="input" value="123">
  div>
template>

<script>
import Cpn1 from "./components/Cpn1.vue";
import Cpn2 from "./components/Cpn2.vue";

export default {
  components: { Cpn1, Cpn2 },
  name: "app",
  methods: {
    showDom() {
      console.log(this.$refs.c1);
      console.log(this.$refs.c2.$data.name);
      console.log(this.$refs.title)
      console.log(this.$refs.input.value)
      // 获取一个真实的dom对象并修改值
      var title=this.$refs.title;
      title.innerText="helloWord"
    },
  },
};
script>

执行上面的程序,点击页面上的《按钮》,效果如下:


同时看控制台:

可以看到当ref对象用在普通元素上时获取到的是普通DOM元素,当ref用在子组件上时,引用指向组件实例。

根据实际需要,可以通过ref给元素或者子组件注册引用信息,在需要用到的时候我们可以通过$refs获取真实的DOM元素或者组件实例进行我们想要的操作。

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

梁鹏翱
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部