Vue获取子组件实例对象 ref 属性

这篇具有很好参考价值的文章主要介绍了Vue获取子组件实例对象 ref 属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 Vue 中推荐使用 ref 属性获取 DOM 元素,这种方式可以提高性能。

如果将 ref 属性使用在组件上,那么返回的就是这个组件的实例对象。

使用方式:`<p ref="xxx">` 或 `<Banner ref="xxx">` 。

获取方式:this.$refs.xxx

1.原生 JS 获取 DOM 元素【不推荐】:

<template>
    <div>
        <h2>主页</h2>
        <p id="title">{{ msg }}</p>
        <button @click="getDOM">点击获取DOM元素</button>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            msg: "哇哈哈哈!"
        }
    },
    methods: {
        getDOM() {
            // 通过原生 JS 获取 DOM 元素
            console.log(document.getElementById("title"));
        }
    }
}
</script>

Vue获取子组件实例对象 ref 属性

2. 通过 ref 属性获取 DOM 元素【推荐】:

<template>
    <div>
        <h2>主页</h2>
        <p ref="title">{{ msg }}</p>
        <button @click="getDOM">点击获取DOM元素</button>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            msg: "哇哈哈哈!"
        }
    },
    methods: {
        getDOM() {
            // 通过 ref 属性获取 DOM 元素
            console.log(this.$refs.title);
            console.log(this);
        }
    }
}
</script>

:ref 属性就是 id 的替代者,会将绑定 ref 属性的元素添加到 Vue 实例对象上,可以通过 $refs 属性获取这个 DOM 元素。

Vue获取子组件实例对象 ref 属性

 Vue获取子组件实例对象 ref 属性

 


 获取子组件实例对象:

首先需要在 components 文件夹内创建一个子组件。例如:Banner.vue 组件。

<template>
    <div>
        <h2>轮播图</h2>
        <p>图片数量:{{ num }}</p>
    </div>
</template>

<script>
export default {
    name: "Banner",
    data() {
        return {
            num: 5
        }
    }
}
</script>


然后在 Home.vue 页面引入 banner.vue 组件。并给组件绑定 ref 属性。

<template>
    <div>
        <h2>主页</h2>
        <p ref="title">{{ msg }}</p>
        <button @click="getDOM">点击获取DOM元素</button>
        <Banner ref="ban"></Banner>
    </div>
</template>

<script>
import Banner from "../components/Banner";
export default {
    name: 'Home',
    components: { Banner },
    data() {
        return {
            msg: "哇哈哈哈!"
        }
    },
    methods: {
        getDOM() {
            // 通过 ref 属性获取子组件实例对象
            console.log(this.$refs.ban);
            console.log(this.$refs.ban.num);
        }
    }
}
</script>

:如果在组件上绑定 ref 属性,那么获取到的就是这个组件的实例对象。并且可以通过这个对象,使用子组件内的数据和方法,或传递参数。

Vue获取子组件实例对象 ref 属性

 

原创作者:吴小糖

创作时间:2023.3.24文章来源地址https://www.toymoban.com/news/detail-443551.html

到了这里,关于Vue获取子组件实例对象 ref 属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包