当前位置：首页技术论坛 Vue中ref的用法与演示

Vue中ref的用法与演示

2024-09-04 16:59:16

复制链接

9154

vue

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

运营部

孙军玲

已更新 793篇

他的主页

板块推荐

排行榜

用户协议

欢迎访问我们的网站！我们非常重视用户的隐私权和信息安全，因此制定了以下用户协议，以明确我们与您之间的关系以及您在使用本网站时应遵守的条款。请您仔细阅读并同意本协议的所有条款，以便您能够合法、安全地使用本网站。如果您不同意本协议的任何内容，请立即停止使用本网站。

服务说明：本网站是一个提供定制软件开发服务和在线找技术搭档的互联网平台。我们保留随时更改、更新或暂停本网站的权利。我们会尽力确保网站的正常运行，但对于因技术问题、系统维护或其他原因导致的网站暂时不可用，我们不承担任何责任。
用户注册：用户需要通过提供手机号、微信扫码和其他必要信息来注册一个账户。您有责任保护您的用户名和密码，不得将其透露给任何第三方。对于因您的用户名和密码被泄露而导致的任何损失或损害，我们将不承担责任。
用户行为规范：用户应遵守中华人民共和国相关法律法规，不得发布或传播违法信息、侵犯他人权益的内容。用户应对其发布的内容负责，并承担因发布不当内容而引起的任何法律责任。
版权声明：本网站所包含的所有文字、图片、音频、视频等素材的著作权均归本网站所有（会员用户上传的默认承诺为不侵权的合法自有技术成果，本网站审核信息后可展示，所有权不归本网站）。未经本网站书面许可，任何单位或个人不得以任何形式复制、转载、修改或传播本网站的任何内容。对于侵犯本网站知识产权的行为，将依法追究其法律责任。
免责声明：本网站不对因使用本网站而引起的任何直接、间接、偶然、特殊或后果性的损害承担责任。包括但不限于利润损失、数据丢失、业务中断等。
适用法律和争议解决：本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。如发生争议，双方应首先协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。
本协议的解释权归本网站所有。如有未尽事宜，本网站保留最终解释权。
本协议自用户点击“同意”或“接受”按钮时生效。

同意

隐私政策

欢迎访问我们的网站！我们致力于为您提供一个安全、可靠的在线环境。本隐私政策旨在说明我们在您使用我们的网站时如何收集、使用和保护您的个人信息。请仔细阅读以下内容，以了解我们的隐私政策。

信息收集

在使用我们的网站时，我们可能会收集以下类型的信息：

a) 个人识别信息：如姓名、电子邮件地址、电话号码等。 b) 非个人识别信息：如浏览器类型、操作系统、设备类型、IP地址等。 c) 用户行为信息：如访问页面、点击链接、搜索查询等。

信息使用

我们收集的信息将用于以下目的：

a) 提供、改进和个性化我们的服务。 b) 与您联系，回应您的询问和请求。 c) 发送您请求的或我们认为对您有帮助的信息。 d) 进行市场调研和分析，以改进我们的产品和服务。 e) 防止欺诈和其他非法活动。

信息共享

我们不会出售、出租或以其他方式与第三方共享您的个人信息，除非：

a) 获得您的明确同意。 b) 与可信赖的合作伙伴共享，以提供您请求的服务。 c) 根据法律要求或政府机关的要求。 d) 为保护我们的权利、财产或安全。

信息安全

我们采取合理的安全措施，以保护您的个人信息不受未经授权的访问、披露、更改或破坏。然而，请注意，没有任何一种电子存储方法是100%安全的。

Cookie和跟踪技术

我们的网站使用Cookie和类似的跟踪技术来收集有关您使用我们网站的信息。这些信息有助于我们分析和改进我们的网站，以及提供个性化的内容和广告。您可以通过浏览器设置拒绝接受Cookie，但这可能会影响您使用我们网站的能力。

第三方链接

我们的网站可能包含指向其他网站的链接。请注意，我们对其他网站的隐私政策和实践不承担任何责任。我们建议您在访问这些网站时查看其隐私政策。

隐私政策的变更

我们可能会不时更新本隐私政策。请定期查看此页面，以确保您了解我们对个人信息的最新政策。

联系我们

如果您对我们的隐私政策有任何疑问或建议，请通过以下联系方式与我们联系：

电子邮件：[wangye-101@163.com]

电话：+86-173-3019-6230

地址：中国石家庄市长安区吾悦广场2010室

感谢您的信任和支持！我们将竭诚为您提供更优质的服务。

同意

Vue中ref的用法与演示

2024-09-04 16:59:16

板块推荐

排行榜

热门推荐

提示

微信扫一扫快速联系

用户协议

隐私政策