Vue学习之ref属性
简介主要讲解vue中的ref属性。直接先说结论:专门被用来给html元素和子组件注册引用信息的(id属性的替代者)。该属性应用在html元素时,获取的是dom元素对象,如果应用在组件标签上,那么获取的是组件实例对象(vc)。使用方式:打标志:<h1 ref=“xxx”>ref</h1> 或者<School ref=“xxx”></School>获取:
·
简介
主要讲解vue中的ref属性。
直接先说结论:
- 专门被用来给html元素和子组件注册引用信息的(id属性的替代者)。
- 该属性应用在html元素时,获取的是dom元素对象,如果应用在组件标签上,那么获取的是组件实例对象(vc)。
- 使用方式:
打标志:<h1 ref=“xxx”>ref</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
//创建一个vue实例
new Vue({
//这个目前还没学过,先知道他的作用是将app放入容器中。
render: h => h(App),
//配置该vue实例管理id为app的容器
}).$mount('#app')
App.vue:
<template>
<!-- 编写结构 -->
<div>
<!-- 分别使用id和ref -->
<h1 ref="h1d">ref属性学习</h1>
<h2 id="h2d">ref属性学习</h2>
<hr>
<school ref="schRef"></school>
<school id="schId"></school>
<button @click="showDom">打印dom</button>
</div>
</template>
<script>
//引入school组件
import school from "./components/School.vue"
export default {
components:{
//注册组件
school
},
methods:{
showDom(){
//根据id进行打印
console.log(document.getElementById("h2d"));
console.log(document.getElementById("schId"));
//根据ref属性进行获取
console.log(this.$refs.h1d);
console.log(this.$refs.schRef);
}
}
}
</script>
<style>
</style>
School.vue
<template>
<!-- 编写组件结构代码,也就是html代码 -->
<!-- 需要一个div括住,也就是只能有一个根元素,一般使用div -->
<div class="orange">
<div>学校:{{schoolName}}</div>
<div>地址:{{schoolAddress}}</div>
</div>
</template>
<script>
//交互代码编写的地方,需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识,这里一般使用默认暴露,因为这是单文件组件,只需要暴露一个组件对象,
//并且引入默认暴露的组件引入语法比较简单。
export default {
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京"
}
},
}
</script>
<style>
/* 编写样式的地方 */
.orange{
background-color: orange;
}
</style>
效果:
由上面可以得出结论:
- 当获取的是html元素时,ref和id的效果是一样的。
- 当获取的是子组件元素时,ref获取的是组件实例vc,而id获取的却是组件根元素及其后代元素。
更多推荐
已为社区贡献4条内容
所有评论(0)