vue2和vue3中 ref/refs 使用示例

最新推荐文章于 2024-04-12 15:28:14 发布

温柔于心动

最新推荐文章于 2024-04-12 15:28:14 发布

阅读量338

点赞数 3

分类专栏： vue vue3 前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/frazier1995/article/details/133275840

版权

vue 同时被 3 个专栏收录

80 篇文章 4 订阅

订阅专栏

前端

38 篇文章 1 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

举例的都是方法，参数的话是大同小异，可以自己动手试试！

vue2中父组件使用子组件方法参数

// 父组件
<template>
    <div>
        <head ref="headchild"/>
    </div>
</template>
<script>
import head from "./head";

export default {
    methods: {
        getList(){
            this.$refs.headchild.init()
        }
    }
}
<script/>

// 子组件
<template>
    <div></div>
</template>
<script>

export default {
    methods: {
        init(){
            console.log('zxc')
        }
    }
}
<script/>

vue3中父组件使用子组件方法参数

// 父组件
<template>
     <head ref="headchild"/>
</template>

<script setup>
import head from "./head";
import { ref } from "vue";
const headchild= ref(null);
const getList = () => {
   headchild.value.init()
}
<script/>

// 子组件
<template>
    <div></div>
</template>
<script setup>
const init = () => {
   console.log('zxc')
}
defineExpose({
  init,
});
<script/>