Vue中ref属性

最新推荐文章于 2024-05-20 17:02:17 发布

林代码er

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量49

点赞数 1

分类专栏： linerVue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_71088505/article/details/131842349

版权

linerVue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

ref属性：

1.被用来给元素或子组件注册引用信息（id的替代者）

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc)

3.使用方式：

打标识：<h1 ref="xxx">.......</h1> 或 <School ref="xxx"></School>

获取：this.$refs.xxx

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from "./App";
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render:h=>h(App)
})

School.vue

<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
  name: "MySchool",
  data(){
    return {
      name:'山河大学',
      address:'山河四省'
    }
  }
}
</script>

<style scoped>
  .school{
    background-color: aqua;
  }
</style>

App.vue

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
import School from "./components/School";
export default {
  name: "App",
  components:{
    School,
  },
  data(){
    return{
      msg:'欢迎来到山河大学',
    }
  },
  methods:{
    showDOM(){
      console.log(this.$refs.title)   //真实DOM元素
      console.log(this.$refs.btn)     //真实DOM元素
      console.log(this.$refs.sch)     //School组件的实例对象（vc)
    }
  }
}
</script>

<style scoped>

</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
<!--      针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--      开启移动端的理想视口-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--      配置页签图标，<%= BASE_URL %>指的是从public路径开始往后-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--      配置网页标题-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
<!--  当浏览器不支持js时noscript中的元素就会被渲染-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
<!--    容器-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

执行效果：