Vue 中的 Ref
1：ref说明
<!--
## ref属性
1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
2. 获取：```this.$refs.xxx```
-->2:界面代码结构
3：具体代码内容
vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave:false /*关闭语法检查*/ })
main.js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue生产提示 Vue.config.productionTip=false; // 创建Vm const vm = new Vue( { el:'#app', render: (h) => h(App) });App.vue
<!-- ## ref属性 1. 被用来给元素或子组件注册引用信息（id的替代者） 2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 3. 使用方式： 1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>``` 2. 获取：```this.$refs.xxx``` --> <template> <div> <!-- ref:标识符 原生Dom的id标识符替代者--> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDom">点击输出上方的Dom元素信息</button> <hr/> <div class="divCss"> <h1 class="h1Css">验证闭合标签组件在脚手架环境下渲染情况</h1> <School ref="schoolRef" /> <School id="schoolId"/> <School /> </div> </div> </template><script> import School from './components/School.vue'; export default { name:'App', components:{ School }, data(){ return { msg:"欢迎新同学来此学习！" } }, methods: { showDom(){ console.log("@@ title ===>",this.$refs.title); //真是DOM元素 console.log("@@ btn ===>",this.$refs.btn); //真是DOM元素 console.log("@@ schoolRef ===>",this.$refs.schoolRef); //School组件的 实例对象(vc) console.log("@@ schoolId ===>",document.getElementById("schoolId")); //真是DOM元素 } } } </script><style> .divCss{ background-color: chocolate; margin: auto; padding: 20px; } .h1Css{ font-size: 36px; color: white; } </style>
School.vue
<template> <div class="schoolClassStyle"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template>
<script> export default { name:'School', data () { return { name:'华南师范大学', address:'广州市天河区中山大道西55号', } } } </script><style> .schoolClassStyle{ background-color: aquamarine; } </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"> <!-- 配置页签的图标 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 配置网页的标题：找 package.json文件里的 "name": "vue_test" 值 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <!-- 如果浏览器不支持js，则该标签的元素里的内容将会被渲染 --> <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>
4:界面效果
