Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第12章 Vue3.X新特性解析 12.9 Refs 模板
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
文章目录
- Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
- 第12章 Vue3.X新特性解析
- 12.9 Refs 模板
第12章 Vue3.X新特性解析
12.9 Refs 模板
Refs模板用于获取页面DOM元素或者组件，与Vue2.x的$refs类似。
Refs模板的使用方法：
- 在setup()中创建ref对象，其值为null
- 为元素添加ref属性，其值为步骤1中创建的ref对象名
- 完成页面渲染之后，获取DOM元素或者组件。
举个栗子：
创建新组件ComRefDom.vue
<template>
<div>
<h1 ref="msg">Hello Vue3</h1>
</div>
</template>
<script>
import {ref , onMounted} from 'vue'
export default {
setup () {
//使用ref函数定义响应式数据，传入null
var msg = ref(null)
onMounted(() => {
console.log(msg.value)
msg.value.style.color = 'red'
})
return {
msg
}
}
}
</script>
使用Refs模板获取组件，创建ComRef组件
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
var msg = ref("Hello Refs")
var btn = () => {
console.log(msg.value)
}
return {
msg ,
btn
}
}
}
</script>
在App父组件中引用ComRef子组件。
<template>
<div id="nav">
<ComRef ref="Commsg"></ComRef>
</div>
<!-- <router-view/> -->
</template>
<script>
//引用子组件
import ComRef from './components/ComRef'
import { onMounted,ref } from 'vue';
export default {
//注册子组件
components : {
ComRef
},
setup() {
//使用ref函数定义响应式数据，传入null
var Commsg = ref(null)
//完成页面渲染后，使用组件中的属性或者方法
onMounted(() => {
//调用子组件中的数据
console.log(Commsg.value.msg)
//调用子组件中的方法
Commsg.value.btn()
})
return {
Commsg
}
}
}
</script>
<style>
</style>
运行效果：
通过ref，可以在父组件中直接调用子组件中的数据和方法。