vs2017手机网站开发,淘宝券商城网站制作,wordpress默认主题12,彩页设计图片模板1. 介绍
概念#xff1a;通过 ref标识 获取真实的 dom对象或者组件实例对象
2. 基本使用
实现步骤#xff1a; 调用ref函数生成一个ref对象 通过ref标识绑定ref对象到标签
代码如下#xff1a;
父组件#xff1a;
script setup
import { onMounted, ref } …1. 介绍
概念通过 ref标识 获取真实的 dom对象或者组件实例对象
2. 基本使用
实现步骤 调用ref函数生成一个ref对象 通过ref标识绑定ref对象到标签
代码如下
父组件
script setup
import { onMounted, ref } from vueimport SonCom from /components/Son-com.vue// 获取元素const titleRef ref(null)// 修改元素内容const updateTitle () {titleRef.value.innerText 我是父组件 agein}// 渲染完成调用onMounted(() {updateTitle()})// 获取组件const sonRef ref(null)// 调用子组件的方法和属性const getSonMethod () {sonRef.value.sonMethod()console.log(sonRef.value.count);}/scripttemplatediv reftitleRef我是父组件/divSonCom refsonRef/SonCombutton clickgetSonMethod调用子组件的方法和属性/button
/templatestyle
/style子组件
script setup
import { ref } from vue;// 创建子组件属性
const count ref(999)// 创建子组件方法
const sonMethod () { console.log(子组件方法) }// 暴露方法父组件可以使用
defineExpose({ count, sonMethod
})/scripttemplatediv我是子组件/div
/templatestyle scoped
/style3. 内容解析
3.1 获取元素解析 3.2 获取子组件解析
