当前位置：首页 > news >正文

网站建设推广的10种方法站长工具网站查询

news 2026/4/6 4:45:55

网站建设推广的10种方法,站长工具网站查询,国学大师网站是哪里做的,微博推广怎么做1. 介绍概念：通过 ref标识获取真实的 dom对象或者组件实例对象 2. 基本使用实现步骤： 调用ref函数生成一个ref对象通过ref标识绑定ref对象到标签代码如下： 父组件： <script setup> import { onMounted, ref } …

1. 介绍

概念：通过 ref标识获取真实的 dom对象或者组件实例对象

2. 基本使用

实现步骤：

调用ref函数生成一个ref对象
通过ref标识绑定ref对象到标签

代码如下：

父组件：

<script setup>
import { onMounted, ref } from 'vue'import 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);}</script><template><div ref="titleRef">我是父组件</div><SonCom ref="sonRef"></SonCom><button @click="getSonMethod">调用子组件的方法和属性</button>
</template><style>
</style>

子组件：

<script setup>
import { ref } from 'vue';// 创建子组件属性
const count = ref(999)// 创建子组件方法
const sonMethod = () => { console.log('子组件方法') }// 暴露方法，父组件可以使用
defineExpose({ count, sonMethod 
})</script><template><div>我是子组件</div>
</template><style scoped>
</style>