• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue中ref的用法及演示

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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元素或者组件实例进行我们想要的操作。

到此这篇关于Vue中ref的用法及演示的文章就介绍到这了,更多相关Vue中ref的用法内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
nodejs插件及用法整理发布时间:2022-02-05
下一篇:
Vue中props用法介绍发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap